CSS網格的孫子溢出容器

Question

我有一個固定高度的 CSS 網格，我需要讓其中一個孫子可滾動。

如果我設置height: 100%; overflow: auto一切都很好 height: 100%; overflow: auto 。 但是，我需要一個深度嵌套的孩子才能滾動，而不是直接的孩子：

<div class="grid">
  <div class="direct-child">
    <div class="another-one">
      <div class="make-this-scrollable"> <--

我試圖“傳播”高度（在樹中的所有元素上設置height: 100% ）設置min-height: 0 ，為網格的模板行設置minxmax(0, 1fr)但沒有任何效果，內容.make-this-scrollable總是溢出（所有元素的計算高度等於內容高度，除了網格）。

我怎樣才能解決這個問題？

Answer 1

我用另一個min-height: 0解決了它。 我的問題是.direct-child本身就是一個 CSS 網格，我還需要 .another .another-one上的min-height: 0以允許元素縮小到內容高度以下。

 .grid { height: 80vh; display: grid; grid-template-columns: 1fr; }.direct-child { height: 100%; min-height: 0; display: grid; background-color: slateblue; }.another-one { height: 100%; min-height: 0; }.make-this-scrollable { height: 100%; overflow-y: auto; }

 <div class="grid"> <div class="direct-child"> <div class="another-one"> <div class="make-this-scrollable"> <div class="content"> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> </div> </div> </div> </div>