title: Safari ignoring 100% height of parent flex container
body: <p>In my layout i'm using flex to get 2 boxes right next to each other. One on the left with a lot of text, and one on the right with just a line or two.</p>
  
  <p>I'm trying to make the content of the right box align vertically with the left box.</p>
  
  <p>This would seem fairly trivial using flexbox, and for the most part it is. Except.. Safari is a thing. It works in both Chrome and FF just as excepted, but in safari the 100% height of the child-container doesn't actually stretch 100% but stays at auto making everything stay in the top.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="col-md-12 simple-container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="page-left col-sm-6"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veniam, molestiae natus aliquam voluptatibus recusandae atque sunt incidunt iste aperiam fugiat officiis cumque modi aut, neque doloremque mollitia. Illo, doloremque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quasi veritatis vitae quae dolorem pariatur necessitatibus assumenda nam asperiores dicta, ut cum quibusdam nulla rem! Iste, dignissimos obcaecati. Quod, aliquam.&lt;/div&gt;
        &lt;div class="page-right col-sm-6"&gt;"You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder"&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.simple-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
  }
  
  .simple-container .page-left h2 {
      margin-bottom: 0;
      font-weight: 400;
  }
  
  .simple-container .page-left .subtitle {
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: 100;
  }
  
  .simple-container .page-right {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100%;
  }
  
  .simple-container .page-right h2 {
      font-weight: 400;
      font-style: italic;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/xtvf88hy/13/" rel="nofollow noreferrer">https://jsfiddle.net/xtvf88hy/13/</a></p>
  
  <p>What kind of CSS/Flexbox sorcery am i missing?
  I can "fix" it by giving .page-right a fixed height equal to .page-left but i'd rather not get <strong><em>that</em></strong> hacky.</p>