Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap

by

This appears to be yet another bug in the Flexible Box Layout Module involving flex-direction: column and flex-wrap: wrap.

Browsers seem to be all over the place on this issue.

In this particular case, as stated in a bug report:

It seems to me that the width is calculated as if the inside elements were laid out horizontally (flex-direction: row) instead of vertically.

In other cases, the opposite occurs:

In both cases, there are currently no flex methods to resolve the problem.

For this particular question, one developer offers a CSS workaround, but I’m not sure it works in all browsers. I wouldn’t recommend it unless you’re truly desperate:

In some instances, you may be able to workaround this issue by using
vertical writing mode.

That is, instead of using flex-direction: column;, use
flex-direction: row; writing-mode: vertical-lr;. Remember to reset
to writing-mode: initial; in the children of the flexbox.

https://bugs.chromium.org/p/chromium/issues/detail?id=507397

Bug reports:

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. Fill the remaining height or width in a flex container
  7. Remove space (gaps) between multiple lines of flex items when they wrap
  8. Flexbox: 4 items per row
  9. How to vertically align text inside a flexbox?
  10. Absolutely positioned flex item is not removed from the normal flow in IE11
  11. How to Right-align flex item?
  12. How to remove the space between inline/inline-block elements?
  13. Heights rendering differently in Chrome and Firefox [duplicate]
  14. flex container min-height ignored in IE
  15. Properly sizing and aligning the flex item(s) on the last row
  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. Flexbox not giving equal width to elements
  20. Why does percentage padding break my flex item?
  21. All widths set to width of widest element
  22. CSS – How to have children in different parents the same height?
  23. Why does flexbox stretch my image rather than retaining aspect ratio?
  24. How to center-align one flex item and right-align another using Flexbox [duplicate]
  25. How to make a sticky footer using flexbox in IE11?
  26. Why is there vertical scroll on the main container?
  27. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  28. Pin a flex item to the bottom of the container
  29. Aligning to the bottom in flexbox
  30. Sizing flex items on the last row

Leave a Comment