Height of flex container not working properly in Safari
<p>So I have a flexbox with columns and max-height to make the columns stack next to each other in 3 columns.</p>

<p>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.</p>

<p>I've made an example here:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>Results in Chrome and Safari are screencapped below.</p>

<p>Chrome:</p>

<p><a href="https://i.stack.imgur.com/gjMLG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gjMLG.png" alt="Result in Chrome"></a></p>

<p>Safari:</p>

<p><a href="https://i.stack.imgur.com/cUq1v.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cUq1v.png" alt="Result in Safari"></a></p>

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

<p>What I want to know is:</p>

<ol>
<li>Are there any workarounds to this? and </li>
<li>Has it been reported as a bug?</li>
</ol>