Height of flex container not working properly in Safari

by

As stated in another answer about Safari problems with flexbox, because flex is relatively new (CSS3), not all browsers work as expected. In some browsers, flex layout is partially supported or fully botched, depending on the combination of properties you apply.

In this particular case, Safari simply refuses to acknowledge max-height: 400px on the flex container. However, if the flex container isn’t responding, you can get help from the parent.

This is where you are now:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px; /* not working in Safari */
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}

Try this instead:

body {
    display: flex;
    max-height: 400px;
}
section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}


body {
    display: flex;
    max-height: 400px;
}
section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}
div {
  height: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}
<section>
  <div></div>
  <div></div>
  <div></div>
  <div style="height:200px"></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Another thing to keep in mind is that flex layout with column wrap has many bugs. It’s possibly the most bug-ridden area in flexbox today. Here are two more examples:

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. How do I make flex box work in safari?
  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. Flexbox and Internet Explorer 11 (display:flex in ?)
  16. ‘position: sticky’ not working when ‘height’ is defined
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Text not centered with justify-content: center
  19. Flexbox affects overflow-wrap behavior
  20. How to stretch flex child to fill height of the container?
  21. How to align flexbox columns left and right?
  22. Flexbox resize and scrollable overflow [duplicate]
  23. CSS object-fit: contain; is keeping original image width in layout
  24. Flexbox on IE11: image stretched for no reason?
  25. extra space when centering elements using flexbox
  26. Height is not correct in flexbox items in Chrome [duplicate]
  27. How to make a flex item not fill the height of the flex container? [duplicate]
  28. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment