Prevent flex items from overflowing a container

by

For me simply adding min-width: 0; to the overflowing div prevented the overflow:

article {
  min-width: 0;
}

Explanation:

min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto. This can make block elements take up much more space than desired, resulting in overflow.

min-width is defined to win against competing width and max-width, meaning as soon as the element’s width would shrink below its implicit auto width, min-width:auto will kick in and keep the element from shrinking.

The fix is obvious now: min-width: 0

It tells the browser that this element has no right to take up any minimum width, and now it will be rendered properly, taking up only as much width as is available.

A note about flex-shrink: While flex-shrink sounds like it could help here, it does not. The described issue is about element-sizing based on the element’s content, while flex-shrink defines shrinkage relative to other flex elements in the same context. Source

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  3. Vertical Align Center in Bootstrap 4 [duplicate]
  4. Chrome / Safari not filling 100% height of flex parent
  5. Why is a flex item limited to parent size?
  6. What are the differences between flex-basis and width?
  7. Bootstrap align navbar items to the right
  8. Aligning grid items across the entire row/column (like flex items can)
  9. Make flex-grow expand items based on their original size
  10. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  11. How to make flexbox items the same size?
  12. How can I make Flexbox children 100% height of their parent?
  13. What’s the difference between display:inline-flex and display:flex?
  14. Scrolling a flexbox with overflowing content
  15. CSS flexbox not working in IE10
  16. Usage of display property of flex box items
  17. How to align left last row/line in multiple line flexbox [duplicate]
  18. How to keep wrapped flex-items the same width as the elements on the previous row?
  19. What are the differences between flex-grow and width?
  20. Removing display:flex adds spaces around a link. Why?
  21. Padding-bottom/top in flexbox layout
  22. React native text going off my screen, refusing to wrap. What to do?
  23. Create a row of flexbox items with a max height defined by one child [duplicate]
  24. How to use safe center with flexbox?
  25. Why isn’t my justify-content property working?
  26. Difference between flex-end and end? [duplicate]
  27. How can I create multi columns from a single unordered list?
  28. How to stretch children to fill cross-axis?
  29. Issue when centering vertically with flexbox when heights are unknown
  30. Do I not understand the flex-grow property?

Leave a Comment