子元素填满父容器需父容器设明确高度（如height: 100vh）并启用display: flex，子元素设flex: 1；height: 100%在flex中常失效，应优先用flex分配而非百分比高度。
flex布局下子元素如何填满父容器
用 display: flex 时，子元素默认不自动撑开高度，即使设置了 height: 100% 也常失效——因为父容器若没显式高度，百分比高度就无参照。
关键在于：父容器需有确定高度（如 height: 400px 或 height: 100vh），再配合 flex: 1 或 flex-grow: 1 让子项占满剩余空间。
- 父容器加
display: flex和明确高度（不能只靠内容撑开） - 子元素设
flex: 1可自适应剩余空间；若仅一个子元素，flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 横向铺满用
width: 100%，但纵向必须依赖flex分配，而非单纯height: 100%
.parent {
display: flex;
height: 300px; /* 必须有具体高度 */
}
.child {
flex: 1; /* 自适应宽度和高度 */
}百分比宽高为何经常不生效
width: 100% 多数时候能工作，但 height: 100% 在 flex 容器或文档流中极易失效——它依赖父元素的「计算后高度」，而父元素若高度由内容决定（即 height: auto），百分比高度就会退化为 0。
常见错误场景：html 和 body 没设高度、父容器是 flex 但未设 height、子元素在 position: absolute 下却忘了给父容器设 position: relative。
立即学习“前端免费学习笔记（深入）”；
-
height: 100%要求从根到父的每层都具备可计算高度（至少html, body { height: 100% }） - flex 容器内，子元素
height: 100%无效，应改用flex: 1或align-items: stretch（默认行为，但需确保没设align-self: flex-start等覆盖） -
绝对定位元素用
top: 0; bottom: 0比height: 100%更可靠
flex与百分比混用时的优先级冲突
当同时设置 flex: 1 和 width: 50%，flex 会接管尺寸控制，width 仅作为 flex-basis 的初始值（除非写成 flex: 1 1 50%）。同理，height 在 flex 子项中基本被忽略，除非父容器是 flex-direction: column 且子项设了 flex: 1。
-
flex: 1隐含flex-basis: 0，此时width值不参与计算 - 想保留百分比语义又用 flex，显式写
flex: 1 1 50%，表示「可伸缩、可收缩、基准宽为 50%」 - 横向布局慎用
width+flex混合；纵向布局几乎必须放弃height: xx%，改用flex-direction: column+flex: 1
移动端适配中容易忽略的 viewport 和最小高度
在 iOS Safari 或某些安卓浏览器里，即使写了 height: 100vh，地址栏展开/收起会导致视口高度跳变，100vh 不等于屏幕物理高度。此时 flex: 1 依然稳定，但前提是父链高度没断。
- 务必加
，否则vh单位可能异常 - 对需要“撑满视口”的容器，用
min-height: 100vh比height: 100vh更安全 - flex 布局下，如果子元素内容极少，
flex: 1仍会拉伸；若不希望拉伸，加align-self: flex-start或限制最大高度
真正卡住的点往往不在 flex 写法本身，而在父容器的高度来源是否可靠——检查每一层的 computed height，比反复调 flex 参数更有效。
