title: Display flex acting differently in Chrome and Safari
body: <p><strong>Background:</strong>
  In a tool my team is working on, we are implementing a <code>header</code> that moves off the screen programmatically based on an event listener. After writing the first implementation it worked as expected but only in Chrome.</p>
  
  <p>I am using <code>display:flex</code> on the <code>#wrapper</code> as well as on the <code>#content</code> elements.</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;header&gt;Header Content&lt;/header&gt;
     ...
        &lt;section id="content"&gt;
          &lt;div id="subcontent"&gt;
            &lt;div id="tool"&gt;
              &lt;div id="tool-container"&gt;&lt;/div&gt;
              &lt;svg id="svgTool" height="100%" width="100%" class="svgTool style-scope test-tool"&gt;&lt;/svg&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>some of the css:</p>
  
  <pre><code>...
  #wrapper {
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    margin-left:auto;
    margin-right:auto;
    min-height:100%;
  }
  
  #content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  ...
  </code></pre>
  
  <p>Using some simple JavaScript I am adjusting the <code>margin-top</code> of the <code>header</code> element when a button is clicked (for this example).</p>
  
  <p><strong>Problem:</strong> While Chrome works as expected, Safari does not. I suspect that this must be due to how Safari's version of webkit interprets elements using <code>display: flex</code>. <em>edit: or perhaps it is due to how Safari works with <code>vh</code> units?</em></p>
  
  <p>In Chrome the header will slide up and down without affecting the <code>&lt;svg&gt;</code> element. In Safari, adjusting the <code>margin-top</code> of the header will cause the <code>svg</code> element to create whitespace on the bottom of the screen equal to change in the <code>header</code>'s <code>margin-top</code>.</p>
  
  <p><strong>JSBin:</strong>
  This JSbin works identically to the current implementation of our tool.
  Open it both in Chrome and Safari to see the discrepancy.</p>
  
  <p><a href="http://jsbin.com/kaxiqig/edit?html,css,output" rel="nofollow noreferrer">http://jsbin.com/kaxiqig/edit?html,css,output</a></p>
  
  <p><sub>sidenote: firefox also works as expected</sub></p>