CSS高度：0无证属性？

Question

我有 2 列的主网格。网格取 1 fr 高度。 在右栏中，我想创建具有所有高度的滚动 div。

我们都知道flex不溢出需要apply min-height/min-width: 0;

但我 2 小时尝试应用所有组合以停止高度溢出。我发现了什么？ min-height 在我的示例中没有给出任何内容。但我错过了点击并写入规则高度：0 并且溢出停止了！什么是魔法？我在谷歌中没有发现任何关于它的无证财产！

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

沙盒： https://play.tailwindcss.com/3fyrMQK6Me

Answer 1

通过使元素h-0 具有等于0 的高度，因此它不会影响网格的尺寸（就像它不存在一样）。稍后它将用flex-grow 填充空间

---

如果您想使用min-height，您必须在第二个子元素上考虑h-screen 而不是min-h-screen 然后min-h-0。您还必须禁用页眉和页脚的缩小：

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

你也可以像下面这样简化：

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