如何使用 flexbox 使块占用剩余宽度

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-item 占据剩余的宽度并且它工作正常，几乎......

如果我在paragraph tag 中放入一个长字符串，我希望它占用父级的宽度，如果行太长，则将文本传输到下一行，它的工作原理与Chrome 中的一样，但在Firefox 中，这个长字符串使第二个flex-item 超出允许的宽度，使其超过1300px，从而破坏了布局...

PS

1)我尝试将第一个项目向左浮动并在最后一个项目上添加溢出，它工作正常（并非没有并发症）但我猜 flexbox 似乎更易于使用......

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

小提琴链接：https://jsfiddle.net/afj88pc5/

Answer 1

使用以下 css 将起作用：

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

在此处查看您更新的Fiddle。