Flexbox affects overflow-wrap behavior

Question

Look at this snippet. This is how the overflow-wrap: break-word should work:

Answer 1

When you give display: flex to the wrap, by default the elements a and b are flexed in a line.

Now another default of a flexbox child is the min-width property is auto by default and so the elements a and b takes a min-width corresponding to its content. So set min-width: 0 and things go back to normal - see demo below:

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0; /* ADDED */
}

  

    first div
  
  

    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal