When flexbox items wrap in column mode, container does not grow its width

by

The Problem

This looks like a fundamental deficiency in flex layout.

A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row.)

This question has been asked many times (see list below), with no clean answers in CSS.

It’s hard to pin this as a bug because the problem occurs across all major browsers. But it does raise the question:

How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?

You would think at least one of them would get it right. I can only speculate on the reason. Maybe it was a technically difficult implementation and was shelved for this iteration.

UPDATE: The issue appears to be resolved in Edge v16.

Illustration of the Problem

The OP created a useful demo illustrating the problem. I’m copying it here: http://jsfiddle.net/nwccdwLw/1/

Workaround Options

Hacky solutions from the Stack Overflow community:

More Analysis

Other Posts Describing the Same Problem

More Related Contents:

  1. How to place elements like this
  2. Why don’t flex items shrink past content size?
  3. Targeting flex items on the last or specific row
  4. Can’t scroll to top of flex item that is overflowing container
  5. How to center a flex container but left-align flex items
  6. Left column and stacked right column using flexbox CSS [duplicate]
  7. Last margin / padding collapsing in flexbox / grid layout
  8. Equal width flex items even after they wrap
  9. How to center elements on the last row in CSS Grid?
  10. Change div order with CSS depending on device-width
  11. input / button elements not shrinking in a flex container
  12. How can I combine flexbox and vertical scroll in a full-height app?
  13. Why isn’t object-fit working in flexbox?
  14. text-overflow is not working when using display:flex
  15. Removing margin from flex items when they wrap
  16. Calculator keypad layout with flexbox
  17. Flexbox alternative for IE9
  18. Prevent flex items from stretching
  19. Flex items not respecting margins and box-sizing: border-box
  20. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  21. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  22. Why are some of my CSS rules not working?
  23. Flexbox with fixed header and footer and scrollable content
  24. Different implementation of Flexbox in Firefox and Chrome
  25. Why does flex-box work with a div, but not a table?
  26. What are the default values for justify-content & align content?
  27. display: flex not working on Internet Explorer [duplicate]
  28. Image behavior within flexbox (rows embedded in columns)
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment