overflow:hidden裁剪子元素时百分比尺寸失效，根本原因是子元素宽高仍按父容器content box计算，但视觉被裁剪导致错位或点击失准；需用clip-path替代或配合position:relative+absolute显式定位。
父容器 overflow: hidden 裁剪子元素，百分比尺寸失效
浏览器对 overflow: hidden 的处理是「裁剪内容区域」，但不改变子元素的尺寸计算逻辑——问题在于：子元素（尤其是 video、canvas 或绝对定位元素）的宽高百分比仍按父容器的 content box 计算，而视觉上却被裁掉一部分，导致“看起来错位”或“点击区域失准”。
常见错误现象：
-
video设置了width: 100%; height: 100%，但只显示左上角一小块 - 子
div用position: absolute; top: 0; left: 0; width: 100%; height: 100%，却只占父容器一半高度 - 开发者工具里看到子元素 computed height 是具体像素，但实际渲染被截断
实操建议：
- 用开发者工具逐层检查祖先元素的
overflow值，从目标子元素往上点，直到找到第一个overflow: hidden或overflow: auto - 不要直接删掉
overflow: hidden，优先改用clip-path: inset(0)替代（兼容性查 caniuse） - 若必须保留裁剪且需子元素撑满，给父容器加
position: relative，再把子元素设为position: absolute并显式声明top/bottom/left/right
父级 display: flex 或 grid 下子元素 height: 100% 失效
Flex / Grid 容器本身默认是 height: auto，哪怕它内部有 flex: 1，其 computed height 仍是 auto——这意味着子元素的 height: 100% 没有数值基准，最终退化为内容高度。
容易踩的坑：
- 写了
.container { display: flex; flex-direction: column; }，又给子项写height: 100%，结果高度为 0 - UI 框架（如 Element Plus）的
el-table套在 flex 容器里，height: 100%不生效，表格撑开容器 - Safari 下遇到
min-height: 0（常见于 reset 样式），会阻止align-items: stretch生效
实操建议：
- 直接删掉子元素的
height: 100%，改用flex: 1（等价于flex: 1 1 0） - 如果子元素是第三方组件（如
el-table），外层容器设position: relative，组件本身设position: absolute; top: 0; bottom: 0; left: 0; right: 0; - 检查 computed height 是否为
auto：在开发者工具中选中父容器 → Computed → height，不是具体像素就说明链路断了
父级用了 min-height 却指望子元素 height: 100% 生效
min-height 不是「显式高度」，CSS 规范明确要求百分比高度必须基于包含块的 computed height，而 min-height 只是约束下限，不影响 height 的计算值。
典型表现：
- 父容器
min-height: 600px，子元素height: 100%→ 实际高度为 0 或仅包裹文字 -
min-height: 100vh+height: 100%组合，子元素依然不拉伸
真正可用的解法（按优先级）：
- 改用
display: flex，子元素自动 stretch（前提是没被align-self: flex-start或min-height: 0干扰） - 改用
display: grid，grid 容器天然支持子项height: 100% - 绝对定位：父级
position: relative，子级position: absolute; top: 0; bottom: 0; width: 100%
HTML 非法嵌套导致父容器根本没包住子元素
浏览器解析时遇到非法嵌套（比如 <p></p> 里写了 <div>），会立刻关闭 <code><p></p>，把后续内容扔到外面。结果是你写的结构和实际 DOM 完全不同，子元素看似在父容器里，实则已脱离。
例如：
<div class="wrapper"> <p>文字</p> <div>块内容</div> </div>
实际 DOM 是：
<div class="wrapper"><p>文字</p></div> <div>块内容</div>
这时你给 .wrapper 设任何高度，都不会影响那个孤立的 <div>。<p>验证方式：</p>
<ul>
<li>在开发者工具里右键「Elements」面板 → 「Reveal in Elements panel」，看真实嵌套关系</li>
<li>检查控制台是否有「Did you forget to close a tag?」类警告（Chrome DevTools 会提示）</li>
</ul>
<p>修复要点：</p>
<ul><li>避免在 <code><p></p>、<li>、<td> 等内联/受限上下文中插入块级元素<li>用语义正确的替代方案：比如 <code><p></p> 里换 <span></span>，或用 <div> 替代 <code><p></p> 包裹复合内容
复杂点在于：这些错误不会报错，页面也能渲染，但布局行为完全不可控。最容易被忽略的是没打开开发者工具确认真实 DOM 结构。
