html - 如何使用 flexbox 使 block 占据剩余宽度

Question

所以我的布局接近这个:

.wrapper
  .flex
    .flex-item.first
    .flex-item.last
      %p

和 css 接近这个:

.wrapper {
  min-width: 1100px
  max-width: 1300px
}

.flex {
  display: flex
}

.flex-item.first {
  flex: 0 0 250px;
}

.flex-item.last {
  flex-grow: 5
}

p {
  word-wrap: break-word;
}

我想要实现的是让最后一个 flex 元素占据剩余的宽度并且它工作正常，几乎......

如果我在 paragraph 标签 中放置一个长字符串，我希望它占用父级的宽度，如果该行太长，则将文本转移到下一行并且它可以正常工作就像在 Chrome 中那样，但在 Firefox 中，这个长字符串使第二个 flex-item 超出允许的宽度，使其超过 1300px 从而破坏了布局...

附言

1)我尝试将第一个元素向左浮动并向最后一个元素添加溢出并且它工作正常(并非没有并发症)但是我猜 flexbox 似乎更容易使用......

2) flex-grow 的数字 5 是随机的，只是让它足够大以使其占用剩余空间

Fiddle 链接:https://jsfiddle.net/afj88pc5/

Answer 1

使用以下 css 将有效:

p {
    word-wrap: break-word;
    word-break: break-all;
}

检查更新的 Fiddle在这里。