无需JavaScript如何将一个grid元素高度限制为另一grid元素的高度？

结论 #

无需使用JavaScript，Grid布局和Flex布局都可以实现该需求。

Grid布局实现方案 #

你现有的Grid代码仅需给#limited补充两个属性即可：

#grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#limited {
  overflow-y: auto; /* 替换原来的scroll，内容不足时不显示空滚动条 */
  min-height: 0;
  height: 100%;
}

实现逻辑

• Grid行高默认值为auto，由该行内内容高度最高的子元素决定
• min-height: 0用于覆盖Grid项默认的min-height: auto规则，避免#limited的内容撑高整行高度
• 最终Grid行高完全由#unlimited的内容高度决定，#limited设置height: 100%会自动填充当前行的高度，内容超出时触发滚动
• 父容器高度会随#unlimited的高度自动调整，完全符合补充要求

Flex布局实现方案 #

改用Flex布局同样可以实现，代码如下：

#grid {
  display: flex;
}

#unlimited {
  flex: 2;
}

#limited {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

实现逻辑

• Flex容器默认align-items: stretch，所有子项会自动拉伸到和最高子项相同的高度
• min-height: 0用于覆盖Flex项默认的min-height: auto规则，禁止#limited的内容撑高Flex容器
• Flex容器高度完全由#unlimited的内容高度决定，满足父容器自适应的要求

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