使用 Flexbox 布局替代传统 height 控制，通过 display: flex + max-height + height: auto 组合，让容器自动收缩至内容高度（但不超过最大值），同时确保内部滚动区域正常工作。
使用 flexbox 布局替代传统 height 控制，通过 `display: flex` + `max-height` + `height: auto` 组合，让容器自动收缩至内容高度（但不超过最大值），同时确保内部滚动区域正常工作。
在 CSS 中，我们常希望一个容器“尽可能小，但最多高 100px”，且当内容超出时仍支持垂直滚动——这本质上是 height: min(min-content, 100px) 的语义。遗憾的是，min-content 无法直接用于 height 的 min() 函数中（该语法尚未被主流浏览器支持），而单纯使用 max-height: 100px 又会导致容器高度坍缩为 0（尤其在无显式 height 且子元素未触发 BFC 时），从而破坏滚动行为。
✅ 正确解法：利用 Flexbox 的固有尺寸计算逻辑
Flex 容器在 flex-direction: column（默认为 row，但此处无需显式声明）下，当设置 height: auto 和 max-height: 100px 时，会将自身高度解析为“内容自然高度”和“100px”的较小值；同时，只要子元素正确继承高度并设置 overflow-y: auto，滚动即可生效。
以下是优化后的结构（精简嵌套、语义清晰、兼容性强）：
<div style="
position: absolute;
border: 1px solid black;
box-sizing: border-box;
width: 10rem;
display: flex; /* 关键：启用弹性布局 */
height: auto; /* 允许根据内容自适应 */
max-height: 100px; /* 硬性上限 */
">
<!-- 直接作为 flex item 的滚动容器 -->
<div style="
width: 100%;
overflow-y: auto;
/* 不再需要额外 wrapper，减少嵌套 */
">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
</div>
? 关键要点说明：
- 移除了原结构中冗余的两层 position: relative / position: absolute 包裹，既提升性能又避免定位干扰高度计算；
- Flex 容器默认将子元素拉伸（align-items: stretch），因此内部 会自动填满可用高度，使 overflow-y: auto 生效；
- 若需保留原有三层结构（如因 JS 框架或样式隔离要求），只需确保最内层滚动容器的父级具有明确高度上下文（即 flex item），而非依赖 height: 100% 传递（百分比高度在非绝对定位/非 flex item 下无效）；
- 此方案在 Chrome/Firefox/Safari（≥14.1）中稳定运行；不适用于 display: block 或 inline 上下文（如某些 Modal/Dialog 组件若强制设为 display: block 且未重置，则需额外包裹 flex 容器）。
? 延伸建议：
如需响应式适配，可将 100px 替换为 clamp(50px, 10vh, 150px) 或 CSS 自定义属性（如 --max-height: 100px），进一步增强可维护性。最终目标始终明确：用布局机制代替硬编码高度，让 CSS 自然表达“最小必要高度 + 可滚动”这一交互需求。
