lassejl lassejl - 2 months ago 18
CSS Question

Height of flex container not working properly in Safari

So I have a flexbox with columns and max-height to make the columns stack next to each other in 3 columns.

This works fine in Chrome, but in Safari it seems to only use the last (rightmost) column to set the actual height of the container.

I've made an example here:



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

div {
flex-basis: 100px;
width: 100px;
background-color: red;
margin: 10px;
}

<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>





Results in Chrome and Safari are screencapped below.

Chrome:

Result in Chrome

Safari:

Result in Safari

This seems to be an obvious bug, but I can't find any information about it.

What I want to know is:


  1. Are there any workarounds to this? and

  2. Has it been reported as a bug?


Answer

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. So, as I often have to do with customer service, ask to speak to a supervisor. If the flex container isn't responding, go to 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 probably leads the way for flexbox browser bugs today. Here are two more examples:

Comments