如何将文本子项包装在弹性列中并保持列的宽度固定 - CSS？

Question

我创建了一个 flex 行，其中有 2 列，每列都有 flex:1，这意味着列将把行分成两部分，宽度相等

HTML :

<div class="row">
<div class="columnLeft">
  <p>columnLeft</p>
</div>
<div class="columnRight">
  <p>columnRight</p>
</div>

CSS :

.row {
  display: flex;
  flex-direction: row;
 }
.columnLeft {
  flex:1;
  background-color: coral;
  display: flex;
  flex-direction: column;
}
.columnRight {
  flex:1;
  background-color: green;
  display: flex;
  flex-direction: column;
}

结果： result

问题： 问题是当我在 columnLeft 中添加一个 text 时，其宽度优于 columnLeft 的宽度该列跟随其子项的宽度并打破了 flex:1 flex:1 的作用。 here result after change

How to fix the width of a column in a row and wrap things inside it ??

Answer 1

如果 <p> 的标题很长，如您在问题中显示的那样，则为 word-break: break-all 设置

.row {
  display: flex;
  flex-direction: row;
 }
.columnLeft {
  flex:1;
  background-color: coral;
  display: flex;
  flex-direction: column;
}
.columnRight {
  flex:1;
  background-color: green;
  display: flex;
  flex-direction: column;
}

p {word-break: break-all;}

<div class="row">
<div class="columnLeft">
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="columnRight">
  <p>columnRight</p>
</div>

如何将文本子项包装在弹性列中并保持列的宽度固定 - CSS？

how to wrap a text child inside a flex column and keep the width of the column fix - CSS?

css

flexbox

word-wrap

column-width

two-columns