使用CSS Grid实现动态高度布局：中间行滚动不挤压底部行

我看了你的代码，问题的核心在于中间区域的<ul>设置了固定的height:70%，而且包裹它的容器没有限制自身高度的机制，导致当列表内容过多时，会撑大整个中间的Grid行，进而挤压底部的min-content行。

下面是修正后的代码，完美实现你要的效果：

修正后的CSS #

* { box-sizing: border-box; }
body { overflow-y: hidden; height: 100vh; margin: 0; } /* 消除body默认边距，避免布局偏移 */
.grid { display: grid; grid-template-rows: min-content 1fr min-content; height: 100% }
ul { 
  list-style: none; 
  overflow-y: auto; 
  flex: 1; /* 替换height:70%，让ul自动填充父容器剩余空间 */
  margin: 0; /* 消除ul默认边距 */
  padding: 0; /* 消除ul默认内边距 */
}
li { margin: 5px; background-color: red; padding: 10px; } /* 增加padding让列表项更直观 */
.s-1 { background-color: green; min-height: 100px; padding: 10px; }
.s-3 { background-color: blue; min-height: 100px; padding: 10px; }
/* 给中间的Grid子项添加Flex布局，限制内部元素高度 */
.grid > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

修正后的HTML #

<section class="grid">
  <div class="s-1">Section 1</div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
  </div>
  <div class="s-3">Section 3</div>
</section>

关键调整说明： #

• 给中间的Grid子项添加Flex布局：让它成为Flex容器，这样内部的<ul>可以通过flex:1自动填充容器的全部可用空间，同时限制容器自身不会超出Grid分配的1fr高度。
• 替换ul的height为flex:1：不再用固定百分比高度，而是让ul占满父容器的剩余空间，当内容超出时，overflow-y:auto会触发内部滚动，不会撑大父容器。
• 消除默认边距/内边距：避免浏览器默认样式导致的布局偏差，让效果更准确。

这样调整后，首行和末行会始终保持min-height的最小高度，中间行占据剩余空间，且仅自身内容过多时滚动，完全不会挤压末行。

内容的提问来源于stack exchange，提问作者Pedro Figueiredo