html - 文本没有包裹在均匀分布、宽度均匀的 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

There were few mistakes that I have corrected.

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

Below is the working code.

.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>