使用grid-auto-rows时无法限制CSS网格行高的问题求助

问题场景 #

当内部网格第三行（设置为1fr）的文本内容过长时，外层.item和.container的高度限制完全失效，整个容器被内容强行撑开。

核心原因 #

网格与Flex布局默认遵循「内容优先」的计算逻辑：当子元素内容超出预期高度时，会突破1fr、height:100%等限制规则，导致父级容器被迫适应内容大小。

解决方案 #

通过两处CSS调整，强制约束布局的高度边界：

1. 给.item添加min-height: 0，打破Flex容器的内容优先逻辑，强制子元素遵守高度限制：

.item {
    user-select: none;
    display: flex;
    flex-grow: 1;
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    min-height: 0; /* 新增：强制约束子元素高度 */
}

2. 给.item-content设置height:100%和min-height:0，同时给第三行文本添加溢出控制：

.item-content {
    display: grid;
    grid-template-rows: 20px 20px 1fr;
    overflow-y: hidden;
    height: 100%; /* 新增：继承父级高度 */
    min-height: 0; /* 新增：打破网格内容优先逻辑 */
}

/* 给第三行文本容器添加溢出处理 */
.item-content > :nth-child(3) {
    overflow-y: auto; /* 可选：允许滚动；也可设为hidden直接截断 */
    word-wrap: break-word; /* 确保文本换行，避免横向溢出 */
}

效果验证 #

修改完成后，第三行的长文本会在限定高度内滚动（或截断），.item和.container的高度限制将正常生效，不会再被内容撑开。

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