Search code examples
htmlcssflexboxcss-grid

Css height:0 undocumented property?

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>

enter image description here

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

Solution

  • 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>