Height of flex container not working properly in Safari

Question

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:

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 1

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:

• When flexbox items wrap in column mode, container does not grow its width
• Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap