如何在不硬编码div固定高度的前提下实现inner2 div可滚动

• 现有结构：固定高度（500px）的外层容器.outer内部纵向排布两个兄弟div：.inner1（内容长度动态变化）、.inner2（需要内容超出时可滚动）
• 核心需求：不通过给.inner2硬编码固定高度的方式，实现其内部内容超出时自动出现滚动条，且能自适应外层容器、.inner1的尺寸变化
• 现有实现的问题：.inner2只设置overflow: auto没有约束高度时，会按照内容总高度撑开，超出外层容器的部分被外层的overflow: hidden直接裁掉，无法出现滚动条

这类「固定高度的纵向容器内，第一个块随内容自适应，第二个块占满剩余空间并可滚动」的场景，核心是通过现代布局的空间分配规则，让.inner2的高度自动等于「外层总高度 - .inner1占用高度 - 容器内边距与块间距」的剩余空间，不需要手动计算像素值，主流有两种可落地的实现：

方案1：Flex 纵向布局实现（兼容性覆盖所有现代浏览器） #

只需要修改对应CSS属性，完整配置如下：

.outer {
  border: 1px solid red;
  padding: 10px;
  height: 500px;
  overflow: hidden;
  /* 新增Flex布局配置 */
  display: flex;
  flex-direction: column;
  row-gap: 10px; /* 两个内层块的垂直间距，可按需调整 */
}

.inner1 {
  border: 1px solid blue;
  /* 禁止Flex子项被压缩，始终保持自身内容的实际高度 */
  flex-shrink: 0;
}

.inner2 {
  border: 1px solid green;
  overflow: auto;
  /* 占满纵向剩余的所有可用空间 */
  flex: 1;
  /* 关键补充属性 */
  min-height: 0;
}

关键属性说明：min-height: 0是Flex布局实现滚动的必要配置——Flex子项默认的最小高度规则为「等于自身内容的实际高度」，如果不覆盖这个规则，就算写了flex: 1，.inner2也不会收缩到比自身内容更短，最终会把外层容器撑破，无法触发滚动条。

方案2：Grid 布局实现（代码更简洁） #

如果项目已经使用Grid布局，可通过行轨道分配的方式实现同等效果，配置如下：

.outer {
  border: 1px solid red;
  padding: 10px;
  height: 500px;
  overflow: hidden;
  /* 新增Grid布局配置 */
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行（inner1）随内容自适应，第二行（inner2）占满剩余空间 */
  row-gap: 10px;
}

.inner2 {
  border: 1px solid green;
  overflow: auto;
  /* 同样需要补充覆盖默认最小高度规则 */
  min-height: 0;
}

• 完全不需要给.inner2写入任何硬编码的高度数值，所有尺寸自动计算
• .inner1的内容长度动态变化、外层容器尺寸调整时，.inner2的可用高度会自动同步更新，不需要手动调整像素值
• 滚动触发逻辑稳定，不会出现布局错位、内容被意外裁切的问题

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