CSS (Tailwind) Grid height 100vh not working-CodePudding

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 >
  <div >Header</div>
  <div >
    <div >Navigation</div>
    <div >
    Container
      <div  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

CodePudding user response：

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

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

<div >
  <div >Header</div>
  <div >
    <div >Navigation</div>
    <div >
    Container
      <div  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 >
  <div >Header</div>
  <div >
    <div >Navigation</div>
    <div >
      Container
      <div  style="height: 1000px;">
        Content
      </div>
    </div>
  </div>
</div>