flex 子项的百分比 max-height 不可靠

更新于 2026-09-21

**想给 flex 子项加 `max-h-full` + `overflow-hidden` 来截断超长内容，会因为父 flex 容器没有显式高度而表现不一致。** 要么用**固定 px 的 max-height**，要么用 **JS 算容器高度后动态裁条数**。

症状

给 bars 子容器加 max-h-full overflow-hidden 后，条数多的文件 bars 完全消失；加 min-h-0 也不行；不加 overflow 限制则正常，但超长时溢出底部（不截断）；外层加 overflow-hidden 又会把 hover 面板裁掉。

根因

bars 容器是 flex 子项，max-h-full 相对的是 flex 容器的高度，而 flex 容器没有显式高度（由 top/bottom 定位隐含）。百分比 max-height 在 flex 子项上表现不一致：条数少时不触发；条数多时触发了，但 computed height 变成 0，于是把所有 bars 都隐藏了。

两个可行方向

  • JS 计算容器高度，动态 slice bars 数量（最稳）；
  • CSS 用固定 px 值（如 max-h-[400px]）而不是百分比。

可迁移的判断

「百分比高度」在 CSS 里永远依赖父级有确定高度。父级是 absolute + top/bottom、flex、grid 这类高度隐含的容器时，百分比会退化成不可预期值。遇到「有时生效有时不生效」的尺寸问题，先问：这个百分比相对谁算，那个「谁」有确定高度吗？

相关

  • 滚动层会裁剪溢出内容要与显示层拆开 —— 同源：先问「约束施加在谁身上」，再问尺寸为什么不对
  • 样式丢失先核对类名再怀疑缓存与权限 —— 另一类「样式不生效」的先分诊顺序