Make container shrink-to-fit child elements as they wrap

by

In CSS, the parent container doesn’t know when its children wrap. Hence, it continues scaling its size oblivious to what’s going on inside.

Put another way, the browser renders the container on the initial cascade. It doesn’t reflow the document when a child wraps.

That’s why the container doesn’t shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.

The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there.

In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO

You’ll need a JavaScript solution (see here and here)… or CSS media queries (see here).

When dealing with wrapping text, text-align: right on the container may be helpful in some cases.

More Related Contents:

  1. Center one and right/left align other flexbox element
  2. Flex / Grid layouts not working on button or fieldset elements
  3. How do I keep two side-by-side div elements the same height?
  4. How to disable equal height columns in Flexbox?
  5. Center and bottom-align flex items
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. Flexbox: 4 items per row
  8. How to vertically align text inside a flexbox?
  9. Absolutely positioned flex item is not removed from the normal flow in IE11
  10. Heights rendering differently in Chrome and Firefox [duplicate]
  11. Properly sizing and aligning the flex item(s) on the last row
  12. Maintain image aspect ratio when changing height
  13. How can I have two fixed width columns with one flexible column in the center?
  14. Flexbox not giving equal width to elements
  15. Why does percentage padding break my flex item?
  16. All widths set to width of widest element
  17. CSS – How to have children in different parents the same height?
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. Height of flex container not working properly in Safari
  20. Why is there vertical scroll on the main container?
  21. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  22. How can I create a row-based masonry layout using CSS?
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. How do I make flex box work in safari?
  25. Zebra striping a flexbox table with wrapping items
  26. Element with “display: inline-flex” has a strange top margin
  27. Pin a flex item to the bottom of the container
  28. Aligning to the bottom in flexbox
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment