CSS Grid子内容区域无法拉伸且不显示滚动条问题咨询

你的问题根源在于**subcontainer没有被限制高度**，它的高度默认由内部内容决定，而非占满父级content的可用空间。这导致subcontent的1fr行高规则无法生效（条目少时无法拉伸），同时因为容器没有固定高度，内容溢出时也不会触发overflow-y: auto的滚动效果。

修复步骤 #

只需给subcontainer添加height: 100%;，让它占满父级content的全部高度即可：

.subcontainer {
  background-color: lightblue;
  display: grid;
  height: 100%; /* 新增这一行 */
  grid-template:
    [row1-start] "subheader" min-content [row1-end]
    [row2-start] "subcontent" 1fr [row2-end]
    [row3-start] "subfooter" min-content [row3-end]
    / auto;
}

或者也可以通过给content设置display: grid，让子元素subcontainer自动占满空间：

.content {
  background-color: yellow;
  grid-area: content;
  display: grid; /* 新增这一行 */
}

效果说明 #

• 条目较少时：subcontainer占满content高度，subcontent的1fr会分配剩余空间，自动拉伸填充。
• 条目过多时：subcontent有了明确的高度限制，内容溢出时会在自身区域内显示垂直滚动条，不会影响subheader、subfooter或其他布局区域。

另外，你添加的align-self: stretch是Grid项的默认行为，实际不需要额外设置。

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