title: How to achieve `min-height: content` on a flex container?
body: <p>I have a vertical flex container that centers its content. The height of the container should depend on the viewport height, such that the flexed content appears vertically centered. However, the container height should never be smaller than the content's, otherwise the top of the content would flow out of the viewport's top.</p>
  
  <p>In other words:</p>
  
  <ul>
  <li>If the content's height is smaller than the viewport's, then the flex container's height should be set to the content's height.</li>
  <li>Otherwise, the container's height should be set to <code>100vh</code>.</li>
  </ul>
  
  <p>However, this does not seem to work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .flex-container {
          display: flex;
          flex-direction: column;
          height: 100vh;
          justify-content: center;
      }
          .flex-item {
              flex: 0 0 auto;
          }
               .content {
                   background-color: red;
                   font-size: 50px;
                   color: white;
                   height: 115vh;
               }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;
          &lt;div class="content"&gt;
              Content
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the content starts to disappear as soon as we set <code>.content</code>'s <code>height</code> to something higher than <code>100vh</code>.</p>
  
  <p>Note that I can't set a fixed <code>min-height</code> on <code>.flex-container</code> since I don't know the content's height beforehand.</p>
  
  <p>How to achieve that?</p>