title: Tailwind CSS - How to make content height fit to screen
body: <p>I'm working on an admin dashboard with tailwind css. I want to make the height of Nav and Content fit to the screen.</p>
  <p>I know this will do the trick <code>relative flex min-h-screen</code> but by doing so I'm getting the scroll bar because of the height of App Bar.</p>
  <p>How can I make the content height 100% without getting the scroll bar?</p>
  <p>Minus App Bar height somehow ?</p>
  <pre><code>&lt;&gt;
    &lt;div className='bg-blue-700 px-8 flex items-center justify-between py-4 shadow-sm text-white'&gt;
      App Bar
    &lt;/div&gt;
    &lt;div className='relative flex'&gt;
      &lt;nav className='bg-white shadow-sm p-6 space-y-6 w-64'&gt;
        Navbar
      &lt;/nav&gt;
      &lt;main className='bg-gray-100 flex-1 p-6'&gt;
        Content will go here
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/&gt;
  </code></pre>