如何使用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;
}

我想要实现的是使最后一个弹性项目采用剩余的宽度，并且效果很好，几乎...

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

PS

1）我尝试将第一个项目浮动到左侧并向最后一个项目添加溢出，并且它工作正常（并非没有并发症），但是flexbox似乎更容易使用，我想...

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

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

Answer 1

使用以下CSS将起作用：

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

在这里检查更新的小提琴 。