title: Flex Grow until specific max-height inside of a vertically centered div with min-height 100%
body: <p>I need a centered box inside a 100vh min-height container with a min-height of 100% and a max-height of let's say 600px. thats pretty easy so far. but in my centered box i have 3 other elements (title, content and footer). the content part has to grow until all available space is reached (in this case it's the max-height of the parent minus the title and gg part).</p>
  
  <p>is this possible with flexbox?</p>
  
  <p>here is a short scribble:
  <a href="https://i.stack.imgur.com/dDLKP.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/dDLKP.jpg" alt="enter image description here"></a></p>
  
  <p>I also tried i by myself, but i run into problems as soon as i enter a minheight of 100% istead of a pixel value to the item div.
  any idea how i can fix this and can work with min-height 100%?</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>* {
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
  .wrapper {
    background: rgba(red, 0.3);
    display:flex;
    min-height:100vh;
    align-items: center;
    justify-content:center;
    //flex-direction:column;
    
    .wrapper-inner {
      padding:20px;
      max-width:80%;
      min-height:100%;
      //max-height: 500px;
      background:#fff;
      display:flex;
      flex-direction:column;
      background: rgba(green, 0.2);
      
    }
    .item {
      width:100%;
      min-height:100%;
      display:flex;
      flex-direction:column;
      max-height:600px;
      background:#fff;
    }
    
    .titel,
    .content,
    .footer {
      padding:10px;
      background: rgba(#000, 0.2);
      margin-bottom:10px;
    }
    .content {
     flex-grow:1;
    }
    
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="wrapper-inner"&gt;
      &lt;div class="item"&gt;
  
  
        &lt;div class="titel"&gt;Titel here...&lt;/div&gt;
        &lt;div class="content"&gt;
          content goes here. this box has to grow until the space is filled.
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        &lt;/div&gt;
        &lt;div class="footer"&gt;gg&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is a working fiddle: <a href="https://jsfiddle.net/zg3kLe70/14/" rel="noreferrer">https://jsfiddle.net/zg3kLe70/14/</a></p>
  
  <p><strong>EDIT:</strong> And here the design:
  The White Box has to fill the available max-height space.
  <a href="https://i.stack.imgur.com/ivttb.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ivttb.jpg" alt="enter image description here"></a></p>
  
  <p><strong>EDIT2:</strong> I'm getting closer and closer :) newest fiddel seems to work well in chrome, firefox, edge and safari. but in IE10/11 the content is not centered. i think it's a problem with the min-height:100 vh...
  <a href="https://jsfiddle.net/zg3kLe70/26/" rel="noreferrer">https://jsfiddle.net/zg3kLe70/26/</a> </p>
  
  <p>Thank you,
  Marco</p>