Css 身高：0 无证财产？

Question

i have main grid with 2 columns. grid take 1 fr height. In right column i want create scrolled div with take all height.

We all know that flex dont overflow need apply min-height/min-width: 0;

But i 2 hour try apply all combination for stop height overflow. And what did i find? min-height dont give nothing in my example. But i miss click and write rule height:0 and overflow stopped? what is magic ? I didnt find nothing in google about it undocumented property!

<div class="min-h-screen bg-teal-200 flex flex-col">
  <div class="h-20 bg-indigo-400">header</div>

    <div class="flex-grow grid grid-cols-[300px_1fr] grid-rows-1 bg-green-200">
      <div>left short content</div>
      <div class="flex flex-col">
        <div class="flex-grow bg-rose-300 overflow-y-scroll min-h-0 h-0">
              <div class="h-60 border border-black"></div>
              <div class="h-60 border border-black"></div>
              <div class="h-60 border border-black"></div>
              <div class="h-60 border border-black"></div>
              <div class="h-60 border border-black"></div>
              <div class="h-60 border border-black"></div>
        </div>
      </div>
    </div>

  <div class="h-20 bg-indigo-400">footer</div>
</div>

sandbox: https://play.tailwindcss.com/3fyrMQK6Me

Answer 1

By making the element h-0 it will have a height equal to 0 thus it won't contribute to the dimension of the grid (it's like it doesn't exist). Later it will grow to fill the space with the flex-grow

---

If you want to work with min-height you have to do is to consider h-screen instead of min-h-screen then min-h-0 on the second child element. You have to also disable the shrinking on header and footer:

 <script src="https://cdn.tailwindcss.com"></script> <div class="h-screen bg-teal-200 flex flex-col"> <div class="h-20 flex-shrink-0 bg-indigo-400">header</div> <div class="flex-grow grid grid-cols-[300px_1fr] grid-rows-1 bg-green-200 min-h-0"> <div>left short content</div> <div class="flex flex-col"> <div class="flex-grow bg-rose-300 overflow-y-scroll"> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> </div> </div> </div> <div class="h-20 flex-shrink-0 bg-indigo-400">footer</div> </div>

You can also simplify like below:

 <script src="https://cdn.tailwindcss.com"></script> <div class="h-screen bg-teal-200 grid grid-cols-[300px_1fr] grid-rows-[auto_1fr_auto]"> <div class="h-20 bg-indigo-400 col-span-2">header</div> <div class="bg-green-200">left short content</div> <div class="bg-rose-300 overflow-y-scroll"> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> <div class="h-60 border border-black"></div> </div> <div class="h-20 bg-indigo-400 col-span-2">footer</div> </div>