title: `flex` appearing differently on mobile device to desktop
body: <h2>Issue</h2>
  
  <p>I have a site that works and previews fine on desktop devices responsively, however on mobile it appears incorrectly.</p>
  
  <p>It includes a full-page <code>flex</code> container with two elements that share the horizontal space.</p>
  
  <p>On tablet and mobile, the <code>flex</code> container is set to <code>column</code> so that it displays vertically instead, however <strong>when visiting the site on my mobile device the elements are stacked upon each other</strong>.</p>
  
  <hr>
  
  <h2>Code</h2>
  
  <p><em><code>index.php</code></em></p>
  
  <pre><code>&lt;div class="flex"&gt;
  
      &lt;!-- Header --&gt;
      &lt;div class="hero"&gt;
          &lt;div class="header"&gt;
              &lt;h1&gt;Header Title&lt;/h1&gt;
              &lt;h2 class="subtitle"&gt;Subheading&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End header --&gt;
  
      &lt;!-- Timeline --&gt;
      &lt;div class="timeline"&gt;
          &lt;h2&gt;Timeline&lt;/h2&gt;
          &lt;ul class="timeline-both-side"&gt;
              &lt;li&gt;Element&lt;/li&gt;
              &lt;li&gt;Element&lt;/li&gt;
              &lt;li&gt;Element&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- End timeline --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><em><code>style.css</code> - desktop:</em></p>
  
  <pre><code>div.flex {
      display: flex;
      height: 100vh;
      background-size: cover;
      background-position: center bottom;
  }
  
  div.hero {
      height: 100vh;
      flex: 1;
      position: relative;
  }
  
  div.timeline {
      flex: 0 0 640px;
      overflow-y:auto;
      height: calc(100vh - 66px); /* to account for footer */
  }
  
  div.header {
      position: absolute;
      top: 50%;
      text-align: center;
      width: 100%;
      -ms-transform: translate(0,calc(-50% - 66px)); /* IE 9 */
      -webkit-transform: translate(0,calc(-50% - 66px)); /* Safari */
      transform: translate(0,calc(-50% - 66px));
  }
  </code></pre>
  
  <p><em><code>style.css</code> - tablet:</em></p>
  
  <pre><code>@media
  only screen and (max-width: 960px) {
      div.flex {
          height: auto;
          flex-direction: column; /* vertical! */
      }
  
      div.timeline {
          height: auto;
          margin: auto;
          width: auto;
          display: block;
          flex: 1 100%;
      }
  
      div.hero {
          height: auto;
          display: block;
          flex: 1 100%;
      }
  
      .timeline-both-side {
          width: auto;
      }
  
      div.header {
          position: relative;
          display: block;
          -ms-transform: none; /* IE 9 */
          -webkit-transform: none; /* Safari */
          transform: none;
      }
  }
  </code></pre>
  
  <p><em><code>style.css</code> - mobile:</em></p>
  
  <pre><code>@media
  only screen and (max-width: 480px) {
      div.hero {
          height: auto;
          display: block;
          overflow: hidden;
      }
  }
  </code></pre>
  
  <hr>
  
  <h2>Images</h2>
  
  <p>View in Google Chrome for Desktop (previewing as expected):</p>
  
  <p><img src="https://i.stack.imgur.com/ICZ0P.png" width="300"></p>
  
  <p>View in Google Chrome for Desktop in "Device Mode" for iPhone 6 (previewing as expected):</p>
  
  <p><img src="https://i.stack.imgur.com/zEsx1.png" width="300"></p>
  
  <p>View on iPhone 6 (Portrait) - no main header visible:</p>
  
  <p><img src="https://i.stack.imgur.com/je9Qe.png" width="300"></p>
  
  <p>View on iPhone 6 (Landscape) - elements stacked on top of one another:</p>
  
  <p><img src="https://i.stack.imgur.com/LgI0M.png" width="300"></p>
  
  <hr>
  
  <h2>Question</h2>
  
  <p>Why are the <code>flex</code> child elements stacking on top of one another <em>only</em> when viewing on mobile devices, while previewing fine responsively in my desktop browser?</p>