title: Height 100% is not working on FF and IE if container have height:auto
body: <p>I have some strange behavior. Basic html structure:</p>
  
  <pre><code>&lt;div class="overlay"&gt;
  &lt;div class="block"&gt;
    &lt;div class="content"&gt;
      &lt;form&gt;
       ...
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>.overlay{
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 15;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,.8);
  }
  .block{
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      height: auto;
      max-height: calc(100% - 30px);
      max-width: 800px;
      background: #fff;
  }
  .content{
      display: flex;
      flex-flow: column nowrap;
      padding: 15px;
      flex: 1 1 auto;
  }
  form{
      display: flex;
      flex-direction: column;
      overflow-y: auto;
  }
  </code></pre>
  
  <p>In Chrome <code>block</code> element takes as much as content is but scroll bar is added if content is longer. However in firefox and EDGE scrollbar is not added. </p>
  
  <p>I have tracked down that problem is with <code>height: auto;</code> on <code>block</code> element. If set to auto <code>content</code> element height is over <code>block</code>, so <code>heigh:100%</code> property is not working. If I change <code>.block{heiht:100%}</code> then <code>.content{height:100%}</code> does work and scrollbar is added. However I get unplesant fact that now .block height is 100% always, even if content is small.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Ok, I realized that problem is not with the height property but with flexbox properties. Block has <code>display:flex</code> but content has <code>flex-shrink</code> property set to 1. On Chrome content shrinks, but on FF and EDGE it does not shrink.</p>