如何让CSS Grid子项像Flexbox子项一样匹配父容器高度

要让grid-child-1仅延伸至父容器的200px高度，同时避免内容撑破容器，只需给子项及内部内容容器添加高度限制和滚动设置：

修改后的完整样式代码 #

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid;
    width: 100%;
    height: 200px;
}

.grid-child-1 {
    height: 100%; /* 强制子项继承父容器高度 */
}

.content {
    height: 100%; /* 让内容容器占满父项高度 */
    overflow: auto; /* 内容超出时自动显示滚动条 */
}

原理说明 #

1. 给grid-child-1设置height: 100%，让它完全填充grid-container的200px高度，避免因内容过长自动拉伸。
2. 内部的.content容器同样设置height: 100%，并通过overflow: auto让超出的内容在容器内部滚动，而不会溢出到父容器外。

这样就实现了类似Flexbox中子项填充容器、内部内容滚动的效果。

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