How to make a block take the remaining width with flexbox

Question

So I have the layout close to this one:

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

and css close to this:

.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;
}

and what I am trying to achieve is to make the last flex-item take the remaining width and it works fine, almost ...

If I put a long string in the paragraph tag , I expect it to take the width of the parent and if the line is too long, to transfer text to the next line and it works just like that in Chrome , but in Firefox , this long string makes the second flex-item go outside the allowed width, making it more than 1300px and thus breaking the layout...

PS

1)I tried floating the first item to left and adding overflow to the last item and it worked ok ( not without complications ) but flexbox seems easier to work with, I guess ...

2) The number 5 for flex-grow is random, just made it big enough to make it take the remaining space

Link to Fiddle: https://jsfiddle.net/afj88pc5/

Answer 1

Use following css will works:

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

Check your updated Fiddle here.