title: CSS set height and width but have div resize in a flexbox
body: <p>I am trying to make a modal dialog that auto resizes and overflows the content inside.  However, the modal content keeps overflowing the container and wont show scrollbars.  It's because the container height is explicitly set, but I want the inner content to stretch it to it's max-size.  I don't know of any tricks to get it to work.</p>
  
  <hr>
  
  <h3>What I originally came up with:</h3>
  
  <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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script&gt;
  
          window.onload = function () {
              var contentString = 'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ';
              window.el = document.getElementById('content')
              function toggleContent() {
                  if (el.innerText == "") el.innerText = contentString;
                  else el.innerText = "";
              }
              window.toggleContent = toggleContent;
              el.innerText = contentString;
          }
  
      &lt;/script&gt;
      &lt;style&gt;
      * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }
  
          #fixed {
              position: fixed;
              top: 12px;
              right: 24px;
              transform: scale(2.0);
          }
  
          .overlay {
              width: 100vw;
              height: 100vh;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: center;
              align-items: center;
              align-content: center;
              background-color: gray;
          }
  
          section {
              background-color: white;
              border: 3px solid red;
              display: flex;
              flex-direction: column;
              width: 36em;
              height: 24em;
              max-width: 95vw;
              max-height: 95vh;
          }
  
          p {
              border: 3px solid green;
              word-break: break-all;
          }
  
          header {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              align-content: center;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="overlay"&gt;
          &lt;section&gt;
              &lt;header&gt;
                  &lt;span&gt;Header&lt;/span&gt;
                  &lt;span&gt;
                      X
                  &lt;/span&gt;
              &lt;/header&gt;
              &lt;p id="content"&gt;Initial Content&lt;/p&gt;
              &lt;footer&gt;Footer&lt;/footer&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;button id="fixed" onclick="toggleContent()"&gt;Toggle&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h3>An example of what it should look like in all four cases (no content, full content, large and small)</h3>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
    var contentString = 'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent';
    window.el = document.getElementsByClassName('filled');
  
    function toggleContent() {
      Array.prototype.forEach.call(el, f =&gt; {
        if (f.innerText == "Content") f.innerText = contentString;
        else f.innerText = "Content";
      })
    }
    window.toggleContent = toggleContent;
    toggleContent();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: flex-start;
  }
  
  #fixed {
    position: fixed;
    right: 0px;
    top: 0px;
  }
  
  .panel {
    display: inline-block;
    overflow: hidden;
    border: 2px solid black;
  }
  
  .panel.one,
  .panel.two {
    width: 50%;
    height: 400px;
  }
  
  .panel.three,
  .panel.four {
    width: 14%;
    height: 400px;
  }
  
  article {
    /* overlay */
    background-color: gray;
  }
  
  section {
    /* modal window */
    border: 3px solid red;
    background-color: white;
  }
  
  p {
    /* content */
    border: 3px solid green;
    word-break: break-all;
  }
  
  article {
    /* overlay, all behave the same pretty much */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .one section {
    /* modal window */
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 50%;
    max-width: 80%;
    max-height: 80%;
  }
  
  .one p {
    /* content */
    border: 3px solid green;
  }
  
  .three section {
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 40%;
  }
  
  .two section {
    display: flex;
    flex-direction: column;
    max-height: 95%;
    max-width: 95%;
  }
  
  .two p {
    max-height: 95%;
    overflow-y: auto;
  }
  
  .four section {
    display: flex;
    flex-direction: column;
    max-height: 95%;
    max-width: 88%;
  }
  
  .four p {
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="panel one"&gt;
      &lt;article&gt;
        &lt;!-- overlay --&gt;
        &lt;section&gt;
          &lt;!-- modal window --&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;!-- body content --&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/div&gt;
    &lt;div class="panel two"&gt;
      &lt;article&gt;
        &lt;section&gt;
          &lt;p class="filled"&gt;Content&lt;/p&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/div&gt;
    &lt;div class="panel three"&gt;
      &lt;article&gt;
        &lt;section&gt;
          &lt;p&gt;Content&lt;/p&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/div&gt;
    &lt;div class="panel four"&gt;
      &lt;article&gt;
        &lt;section&gt;
          &lt;p class="filled"&gt;Content&lt;/p&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/div&gt;
    &lt;button id="fixed" onclick="toggleContent()"&gt;Toggle&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h3>Summary</h3>
  
  <p>Is there a way to do what I want with pure HTML/CSS ?  I cannot find a way to overcome the fact that <code>max-height: 100%</code> only respects explicit definitions of <code>height</code></p>