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

Question

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

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

左边的div是用flex-grow: 3定义的，右边的div是flex-grow: 9定义的。通常，右侧div的大小是左侧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>

EDIT:我本打算在代码段中使用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>