Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]

by

The flexbox specification was updated making the default minimum size of flex items equal to the size of the content: min-width: auto / min-height: auto.

You can override this setting with min-width: 0 / min-height: 0:

.content {
    background: yellow;
    flex: 1;
    display: flex;
    flex-direction: column;

    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

http://jsfiddle.net/d4nkevee/1/

Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

Here are some details from the spec:

4.5. Implied Minimum Size of Flex
Items

To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value of
the min-width and min-height properties defined in CSS 2.1. (read more)

UPDATE

It appears that Chrome has updated their rendering behavior. Chrome 48 now emulates Firefox in terms of minimum flex sizing.

Based on reports in the following links, the solution above should work in Chrome 48, as well.

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Make grid container fill columns not rows
  8. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  9. Align an element to bottom with flexbox
  10. Make background color extend into overflow area
  11. Center text over an image in flexbox
  12. Force flex item to span full row width
  13. Why can’t be flex containers?
  14. Prevent flex items from rendering side to side
  15. What’s the difference between flex-start and baseline?
  16. Equal space between flex items
  17. How can I make a display:flex container expand horizontally with its wrapped contents?
  18. Text not centered with justify-content: center
  19. How to stretch flex child to fill height of the container?
  20. Flexbox resize and scrollable overflow [duplicate]
  21. How can I show three columns per row?
  22. CSS object-fit: contain; is keeping original image width in layout
  23. How to center horizontally and vertically?
  24. Flexbox on IE11: image stretched for no reason?
  25. How do I make flex box work in safari?
  26. Zebra striping a flexbox table with wrapping items
  27. extra space when centering elements using flexbox
  28. Height is not correct in flexbox items in Chrome [duplicate]
  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