title: Flexbox columns overlap in Safari 10
body: <p>I'm working on a simple layout using flexbox that works in Chrome, but in Safari, the heights of elements seem off.</p>
  <p>There is a minimal example fiddle here: <a href="https://jsfiddle.net/6h84h2w6/3/" rel="nofollow noreferrer">https://jsfiddle.net/6h84h2w6/3/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;menu&quot;&gt;
      &lt;div class=&quot;menu-item&quot;&gt;
        Menu item 1
      &lt;/div&gt;
      &lt;div class=&quot;menu-item&quot;&gt;
        Menu item 2
      &lt;/div&gt;
      &lt;div class=&quot;menu-item&quot;&gt;
        Menu item 3
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;content&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    &lt;/div&gt;
    &lt;div id=&quot;antimenu&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
  }
  
  #content {
    display: flex;
    flex-direction: column;
    flex-basis: 68%;
    flex-grow: 1;
    width: 100%;
    max-width: 600px;
  }
  
  #menu {
    display: flex;
    flex-basis: 16%;
    min-width: 10rem;
    flex-shrink: 0;
    
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
  }
  
  #antimenu {
    display: flex;
    visibility: hidden;
    flex-basis: 16%;
    min-width: 10rem;
    flex-shrink: 0;
    height: 0;
  }
  
  .menu-item {
    display: flex;
    margin: 5px;
  }
  </code></pre>
  <p>In Chrome this looks ok:</p>
  <p><a href="https://i.stack.imgur.com/Al5Fn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Al5Fn.png" alt="enter image description here" /></a></p>
  <p>… but Safari gets confused:</p>
  <p><a href="https://i.stack.imgur.com/s3NDb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s3NDb.png" alt="enter image description here" /></a></p>
  <p>This vertical layout is used when a page gets too narrow. A slightly bigger example using a media query can be found here (the <code>antimenu</code> is just used for making sure that <code>content</code> ends up in the centre): <a href="https://jsfiddle.net/6h84h2w6/2/" rel="nofollow noreferrer">https://jsfiddle.net/6h84h2w6/2/</a></p>
  <p>What is wrong here? I guess it's my CSS that is wrong since it's such a small example…</p>