title: How to make div fill full height of parent in tailwind
body: <p>I am using tailwind in my Vuejs app. I have this simple template</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;bg-gray-500 h-screen&quot;&gt;
      &lt;Header /&gt;&lt;!-- //height 32 --&gt;
      &lt;div class=&quot;w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg&quot;&gt;
        &lt;router-view /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The div with <code>h-screen</code> is the root or my app. The component<code>&lt;header&gt;</code> has a tailwind height of <code>h-32</code></p>
  <p>The problem is that the second div causes the page to scroll at the bottom, the height of the <code>&lt;header&gt;</code> (h-32).</p>
  <h1>What I want to do</h1>
  <p>If there is no content, I want the second div to fill the remaining height of the screen but no more.
  If there is content, I want it grow as necessary.</p>