Css height:0 未记录属性？

Question

我的主网格有 2 列。网格采用 1 fr 高度。在右栏中，我想创建滚动 div 并占据所有高度。

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

但是我用了 2 小时尝试应用所有组合以防止停止高度溢出。我发现了什么？在我的示例中，最小高度什么也没有给出。但是我错过了点击并写入规则 height:0 并且溢出停止了！什么是魔法？我没有在 google 中找到任何未记录的内容属性!

<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

填充 space

如果您想使用 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>

Css height:0 未记录属性？

Css height:0 undocumented property?

html

css

flexbox

css-grid

Css height:0 未记录 属性？

Css height:0 undocumented property?

html

css

flexbox

css-grid

Css height:0 未记录属性？