title: Stop flex items stacking on top of each other
body: <p>I'm trying to get to grips with <code>flex</code> and am struggling to create what I'm after.</p>
  
  <h2>What I'm trying to do</h2>
  
  <ul>
  <li>Full screen container</li>
  <li>Two <code>div</code> elements, one right-aligned with a width of <code>640px</code> and one left-aligned taking the remaining space</li>
  </ul>
  
  <h2>What's happening</h2>
  
  <p>My elements are displaying, on top of one another, in the centre of the screen.</p>
  
  <h2>Code</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    height: 100vh;
  }
  div.hero {
    background-size: cover;
    background-position: center bottom;
    position: relative;
    height: 100vh;
    width: 100%;
    margin: auto;
  }
  div.timeline {
    width: 640px;
    margin: auto;
  }
  div.header {
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    /* color: #fff; */
    -ms-transform: translate(0, -50%);
    /* IE 9 */
    -webkit-transform: translate(0, -50%);
    /* Safari */
    transform: translate(0, -50%);
    -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>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
  
    &lt;div class="hero"&gt;
  
      &lt;!-- Header --&gt;
      &lt;div class="header"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;h2 class="subtitle"&gt;Subtitle&lt;/h2&gt;
      &lt;/div&gt;
      &lt;!-- End header --&gt;
  
      &lt;!-- Timeline --&gt;
      &lt;div class="timeline"&gt;
        &lt;ul class="timeline-both-side"&gt;
          &lt;li&gt;
            &lt;div class="border-line"&gt;&lt;/div&gt;
            &lt;div class="timeline-description"&gt;
              &lt;p&gt;Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="opposite-side"&gt;
            &lt;div class="border-line"&gt;&lt;/div&gt;
            &lt;div class="timeline-description"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="border-line"&gt;&lt;/div&gt;
            &lt;div class="timeline-description"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="opposite-side"&gt;
            &lt;div class="border-line"&gt;&lt;/div&gt;
            &lt;div class="timeline-description"&gt;
              &lt;p&gt;Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="border-line"&gt;&lt;/div&gt;
            &lt;div class="timeline-description"&gt;
              &lt;p&gt;Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- End timeline --&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Question</h2>
  
  <p>How can I use <code>flex</code> to have these two elements, both with <code>100vh</code>, in a row like below?</p>
  
  <pre><code>+------------------------------------------+
  |.flex                                     |
  |+-------------------------+ +------------+|
  ||.hero                    | |.timeline   ||
  ||                         | |            ||
  ||                         | |            ||
  |+-------------------------+ +------------+|
  +------------------------------------------+
  </code></pre>