title: Issue when centering vertically with flexbox when heights are unknown
body: <p>My layout has a container <code>flex-container</code> and a child.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;flex-container&quot;&gt;
    &lt;div&gt;text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The container and the child have an <strong>unknown height</strong>. And the goal is:</p>
  <ul>
  <li>If the child has a lower height than the container, it appears centered horizontally and vertically.</li>
  <li>If the child has a greater height than the container, it adjusts to the top and the bottom and we can do scroll.</li>
  </ul>
  <p>Scheme:
  <img src="https://i.stack.imgur.com/iN5v5.jpg" alt="enter image description here" /></p>
  <p>The fastest way for centering a element with flexbox is the follow:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container
  {
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
  
    width: 100%;
    height: 300px; /* for example purposes */
    overflow-y: scroll;
    background: #2a4;
  }
  
  .flex-container &gt; div
  {
    background: #E77E23;
    width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Codepen: <a href="http://www.codepen.io/ces/pen/slicw" rel="nofollow noreferrer">http://www.codepen.io/ces/pen/slicw</a></p>
  <p>But, if the container's child have a greater height, the child is not shown correctly. The child appears cutted (only the top part).</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body
  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .flex-container
  {
    display: flex;
    align-items: center; // vertical
    justify-content: center; // horizontal
    
    width: 100%;
    height: 100px;
    overflow-y: scroll;
    background: #2a4;
  }
  
  .flex-container &gt; div
  {
    background: #E77E23;
    width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Codepen: <a href="http://www.codepen.io/ces/pen/sGtfK" rel="nofollow noreferrer">http://www.codepen.io/ces/pen/sGtfK</a></p>
  <p>Scheme:</p>
  <p><img src="https://i.stack.imgur.com/Jx15X.jpg" alt="enter image description here" /></p>
  <p>Is there a way for resolve this issue?</p>