flex container min-height ignored in IE

by

IE 10 & 11 have a number of issues with rendering flexbox properly.

Here’s one: A flex container doesn’t respect the min-height property in these browsers.

A simple solution is to make your flex container also a flex item.

Just add this to your code (no other changes necessary):

body {
   display: flex;
   flex-direction: column;
}

revised fiddle

More info: https://github.com/philipwalton/flexbugs#flexbug-3

More Related Contents:

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

Leave a Comment