title: How can we adjust the height of a parent element depending on its content?
body: <p>I know there are TONS of similar questions about this BUT I have not found a solution so far. In this case, I have a <code>form</code> inside the <code>main</code>.</p>
  <p>Based on what I've read so far, the parent element (<code>main</code>) should be given a height of 100vh. However, if I do that, if I add a lot of content to the element (<code>form</code>), <strong>the content will render outside of the <code>form</code> element</strong>.</p>
  <p>If the <code>main</code> element has a height of 100%, it will not stretch to the bottom of the page if the content is short.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;CSS Height&lt;/title&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          html * {
              font-family: sans-serif;
              box-sizing: border-box;
              height: 100%;
          }
          body {
              height: 100%;
              background-color: #555;
              margin: 0;
              padding: 0;
          }
          header {
              width: 100%;
              background-color: white;
              padding: 10px;
              margin: 0;
              position: sticky;
              top: 0;
              z-index: 1;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          header span, button {
              margin: 5px;
          }
          main {
              padding: 0;
              display: flex;
              align-items: stretch;
              height: 100%;
              width: 100%;
          }
          form {
              padding: 0;
              width: 40%;
              background-color: #ddd;
              margin: 0 auto;
              height: 100%;
              min-height: 100%;
          }
      &lt;/style&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          window.addEventListener(&quot;load&quot;, () =&gt; {
              const myform = document.querySelector('form');
              let $ = function (id) { return document.getElementById(id); };
              $('longtext').onclick = () =&gt; {
                  myform.innerHTML = &quot;&lt;p&gt;A lot of content&quot;.repeat(100);
              };
              $('shorttext').onclick = () =&gt; {
                  myform.innerHTML = '&lt;p&gt;Short text';
              };
              $('notext').onclick = () =&gt; {
                  myform.innerHTML = '';
              };
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;span&gt;Click a button&lt;/span&gt;
          &lt;button id=&quot;notext&quot;&gt;No Text&lt;/button&gt;
          &lt;button id=&quot;longtext&quot;&gt;Long Text&lt;/button&gt;
          &lt;button id=&quot;shorttext&quot;&gt;Short Text&lt;/button&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;form&gt;&lt;/form&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>