FF 和 Chrome 之间的 Flex 和分词行为不一致

Question

我有一个使用 flex 的基本布局：

<div class="container">
  <div class="left">LongTextWithNoBreaks...</div>
  <div class="right">Short text</div>
</div>

左边div用flex-grow: 3定义，右边用flex-grow: 9定义。通常右边的 div 是左边的 3 倍。但是，当我在左侧有一个很长的文本且没有空格时，它在 chrome 中工作正常，但在 FF (35.0.1) 中工作不多。

注意：我正在使用 word-wrap: break-word; 这样文本会中断。

完整代码：

  .container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    word-wrap: break-word;
  }
  .left {
    background: gray;
    flex: 3 0 0;
  }
  .right {
    color: #333;
    background: green;
    flex: 9 0 0;
  }

<div class="container">
  <div class="left">
    supercalifragilisticexpialidocious supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
  </div>
  <div class="right">
    Hello, World!
  </div>
</div>

编辑： 我打算在代码段中使用 word-wrap 并改为使用 word-break。

注意： 使用 break-all 不是一个好的解决方案，因为它按字符而不是按单词中断。 word-break 首先尝试按单词打断，必要时只在单词中间打断。

Answer 1

貌似FF里缺的一块是在左边的元素上加上min-width: 0

  .container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    word-wrap: break-word;
  }
  .left {
    background: gray;
    flex: 3 0 0;
    min-width: 0;
  }
  .right {
    color: #333;
    background: green;
    flex: 9 0 0;
    min-width: 0;
  }

<div class="container">
  <div class="left">
    supercalifragilisticexpialidocious supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
  </div>
  <div class="right">
    Hello, World!
  </div>
</div>

FF 和 Chrome 之间的 Flex 和分词行为不一致

Flex and word-break inconsistent behavior between FF and Chrome

css

firefox

flexbox