Flexbox affects overflow-wrap behavior

by

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 */
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    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
  </div>
</div>

More Related Contents:

  1. Make background color extend into overflow area
  2. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  3. Why don’t flex items shrink past content size?
  4. CSS margin terror; Margin adds space outside parent element [duplicate]
  5. Fill the remaining height or width in a flex container
  6. How to vertically align text inside a flexbox?
  7. Equal height rows in a flex container
  8. flex-grow not sizing flex items as expected
  9. How to specify line breaks in a multi-line flexbox layout?
  10. How to Right-align flex item?
  11. How to remove the space between inline/inline-block elements?
  12. Can specific text character change the line height?
  13. How to add 1px margin to a flex item that is flex: 0 0 25%?
  14. flex container min-height ignored in IE
  15. Keep the middle item centered when side items have different widths
  16. Maintain image aspect ratio when changing height
  17. float does not work in a flex container
  18. How can I have two fixed width columns with one flexible column in the center?
  19. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  20. CSS grid – maximum number of columns without media queries
  21. Make flex items overlap
  22. 5 items per row, auto-resize items in flexbox
  23. Aligning elements left and center with flexbox
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  26. Why are some of my CSS rules not working?
  27. Different implementation of Flexbox in Firefox and Chrome
  28. display: flex not working on Internet Explorer [duplicate]
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment