CSS (Tailwind) Grid height 100vh not working

Question

currently im trying to create a Layout which fills the whole screen. Thought its very easy but found out it doesn't work as expected.

Here is a Fiddle https://jsfiddle.net/s5ocg3v8/36/

<div class="h-screen grid grid-rows-[auto_1fr] p-5">
  <div class="bg-slate-200 mb-1 p-2">Header</div>
  <div class="grid grid-cols-[auto_1fr]">
    <div class="bg-slate-200 mr-1 p-2">Navigation</div>
    <div class="bg-slate-200 p-2 overflow-y-auto">
    Container
      <div class="border-2 border-black" style="height: 1000px;">
      Content
      </div>
    </div>
  </div>
</div>

if the content gets bigger than the container, the defined height is ignored.

i want the layout to always fill the whole screen but not more, if the content is bigger then it should show a scrollbar for the container.

i could set the header to a fixed height and then use calc(100%-headerHeight) but thats not really what i want

Answer 1

Just add min-h-0 to the second grid container.

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen grid grid-rows-[auto_1fr] p-5">
  <div class="bg-slate-200 mb-1 p-2">Header</div>
  <div class="grid grid-cols-[auto_1fr] min-h-0">
    <div class="bg-slate-200 mr-1 p-2">Navigation</div>
    <div class="bg-slate-200 p-2 overflow-y-auto">
    Container
      <div class="border-2 border-black" style="height: 1000px;">
      Content
      </div>
    </div>
  </div>
</div>

Or always prefer minmax(0,1fr) instead of 1fr

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen grid grid-rows-[auto_minmax(0,1fr)] p-5">
  <div class="bg-slate-200 mb-1 p-2">Header</div>
  <div class="grid grid-cols-[auto_1fr]">
    <div class="bg-slate-200 mr-1 p-2">Navigation</div>
    <div class="bg-slate-200 p-2 overflow-y-auto">
      Container
      <div class="border-2 border-black" style="height: 1000px;">
        Content
      </div>
    </div>
  </div>
</div>