文本不会均匀分布，甚至宽度为flexbox

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. 修正了column divs。
中的 flex属性
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;添加到列类