title: Cannot scroll to last element in content container tailwindcss
body: <p>I want to create an application layout that has a top toolbar with a could of divs in it, </p>
  
  <p>then a sidebar and a content window with a top nav</p>
  
  <p><a href="https://i.stack.imgur.com/p4BUA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4BUA.png" alt="Desired Layout"></a></p>
  
  <p>I have got the structure almost working but I cannot scroll to the bottom of the content container. I want everything else to be fixed. I have included the code and a fiddle. I have a feeling it is to do with the h-screen I have put on the content container, but if I tried h-full it does not scroll at all.</p>
  
  <pre><code>&lt;div class="h-screen  overflow-hidden" &gt;
      &lt;div class="p-4 bg-yellow-500"&gt;
          &lt;div class="h-10 bg-green-500"&gt;
  
          &lt;/div&gt;
          &lt;div class="h-10 bg-blue-500"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="flex"&gt;
          &lt;div class="w-48"&gt;
              sidebar
          &lt;/div&gt;
  
          &lt;div class="w-full bg-indigo-500 p-2 "&gt;
  
              &lt;div class="h-10 bg-orange-500 w-full"&gt;
                  topnav
              &lt;/div&gt;
              &lt;div class=" flex-1 relative z-0 overflow-y-auto   bg-green-500 h-screen"&gt;
                  content
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;&lt;/div&gt;
                  &lt;div class="h-10 bg-white m-3"&gt;Last One&lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sg7aqxv9/5/" rel="nofollow noreferrer">https://jsfiddle.net/sg7aqxv9/5/</a></p>