文本不会换行在均匀分布、宽度均匀的弹性框中

Question

这是一个示例：https：//jsfiddle.net/gxhb2xnu/1

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.column {
  flex: 1;
  background: red;
  margin: 0 4px;
  height: 100%;
}

<div class="container">
  <div class="column">foõ foõ foõ foõ foõ foõ</div>
  <div class="column">foõ</div>
  <div class="column">foõ</div>
  <div class="column">foõ</div>
  <div class="column">foõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõ</div>
</div>

您可以看到最后一列调整其宽度以适应文本。我希望每一列都具有相等的宽度，并只是将中间的宽度分解到下一行。

我尝试了flex-basis: 0和word-wrap: break-word;，但似乎不会影响它。

Answer 1

我纠正的错误很少。

1. 修复了 flex属性在column divs中。
2. 使用word-break:break- word

以下是工作代码。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.column {
  flex-grow: 1;
  flex-basis: 0;
  background: red;
  margin: 0 4px;
  height: 100%;
  word-break: break-word;
}

<div class="container">
  <div class="column">foõ foõ foõ foõ foõ foõ</div>
  <div class="column">foõ</div>
  <div class="column">foõ</div>
  <div class="column">foõ</div>
  <div class="column">foõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõ</div>
</div>

Answer 2

将 word-break: break-word;添加到列类