Chrome does not expand flex parent according to children’s content [duplicate]

by

This appears to be a bug in Chrome.

In this section of code:

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

… Chrome is not respecting the fixed 25px width. Or, at least, the container is not recognizing the space. It looks like the container is being sized before all item calculations are factored in.

The simple workaround is to use width instead of flex-basis.

.items span {
    flex-shrink: 0;
    width: 25px;
 }

revised demo

UPDATE

Bug Report

Flex-basis is being ignored when sizing nested flex containers.

“Yeah this is kind of a sucky consequence of a bug we have, perhaps combined with an unfortunate spec consequence…”

“When the outer flexbox finds the desired size of the inner flexbox, it asks for its max-content size (see LayoutFlexibleBox::computeInnerFlexBaseSizeForChild). But here’s where the bug comes in, the max-content size does not take flex-basis into account, only width properties/actual content. That’s why adding an explicit width fixes the bug.”

More Related Contents:

  1. Different implementation of Flexbox in Firefox and Chrome
  2. Can’t scroll to top of flex item that is overflowing container
  3. Fill the remaining height or width in a flex container
  4. How to vertically align text inside a flexbox?
  5. Equal height children of flex items
  6. flex-grow not sizing flex items as expected
  7. How to Right-align flex item?
  8. How to remove the space between inline/inline-block elements?
  9. How to save CSS changes of Styles panel of Chrome Developer Tools?
  10. flex container min-height ignored in IE
  11. Maintain image aspect ratio when changing height
  12. float does not work in a flex container
  13. How can I have two fixed width columns with one flexible column in the center?
  14. How can I make my flexbox layout take 100% vertical space?
  15. Chrome rendering issue. Fixed position anchor with UL in body
  16. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  17. All widths set to width of widest element
  18. Make flex items overlap
  19. flex-grow not working in column layout
  20. CSS – How to have children in different parents the same height?
  21. Why does flexbox stretch my image rather than retaining aspect ratio?
  22. Aligning elements left and center with flexbox
  23. How to make a sticky footer using flexbox in IE11?
  24. Height of flex container not working properly in Safari
  25. Flexbox, z-index & position: static: Why isn’t it working?
  26. How can you hide the arrow that is displayed by default on the HTML5 element in Chrome?
  27. Why does flex-box work with a div, but not a table?
  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