如何使用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项目占用剩余的宽度，它几乎正常工作......

如果我在paragraph tag中添加一个长字符串，我希望它取父节点的宽度，如果该行太长，则将文本传输到下一行，它就像{ {1}}，但在Chrome中，这个长字符串会使第二个Firefox超出允许的宽度，使其超过flex-item，从而打破布局......

PS

1）我尝试将第一个项目向左移动并向最后一个项目添加溢出并且它工作正常（并非没有复杂性）但是flexbox似乎更容易使用，我猜...

2）flex-grow的数字5是随机的，只要它足够大就可以占用余下的空间

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

Answer 1

使用以下css将起作用：

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

点击此处查看更新后的Fiddle。