title: Css flex overflow issue
body: <p>I have:</p>
  
  <pre><code>.container {
      display:flex;
      align-items:center
  }
  .content {
      flex-grow:1
  }
  </code></pre>
  
  <p>in order to align the <code>.content</code> div vertically with css only. The content changes dynamically and that's why I can't use <code>position:absolute; margin-top:50%...</code> styling. Because I never know the exact height of <code>div</code> on each content update.</p>
  
  <p>But in a scenario where <code>.container</code> width changes but height remains, <code>.content</code> overflows <code>.container</code> top because it wraps the text within.</p>
  
  <p>What I'm trying to do is never let <code>.content</code> exceed the top position less than 0. Even the most ideal situation will be preserving the <code>padding-top</code> value of <code>.container</code> and <code>margin-top</code> value of <code>.content</code>. Overflowing bottom will be OK, in fact it'll be my preference.</p>
  
  <p>Any workarounds?</p>