元素被挤压的根本原因是父容器高度为0或未脱离文档流，需确保容器有明确高度（如height:100vh）、逐级检查父级布局、重置box-sizing为border-box、慎用margin并优先使用gap，flex-basis设为0或改用grid的1fr更稳定。
元素被挤压是因为 flex 或 grid 容器没设高度
常见现象是：flex 容器里子元素明明写了 flex: 1，却缩成一条线，或者文字换行错乱、图片变形。根本原因不是子元素写错了，而是父容器本身高度为 0 或未脱离文档流——比如没有设置 height、min-height，或父级被 position: absolute 挤出布局上下文。
解决思路很直接：让容器有明确的“可用空间”可分配。典型做法是给容器加 height: 100vh（视口高），或用 min-height: 100vh 防止内容少时撑不满；如果嵌套在其它布局中，要逐级检查父级是否设置了 height 或 display: flex 并配了 flex-direction: column。
-
绝对定位的容器需手动设
top/bottom才能推导出高度 -
flex: 1只在父容器为display: flex且主轴方向有明确长度时才生效 - 用
vh单位要注意移动端 Safari 的地址栏缩放问题，可改用dvh（但需检查兼容性）
flex 分配剩余空间时，子元素 margin/padding 会干扰计算
即使容器高度正确，flex: 1 也可能失效——比如顶部导航栏 + 主内容区，主内容区始终不占满剩余高度。这时大概率是子元素自身有 margin、padding 或 border，而 flex 默认按 box-sizing: content-box 计算尺寸，导致“剩余空间”被悄悄吃掉。
最稳妥的做法是统一重置盒模型：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}再配合显式控制尺寸：
- 避免对
flex: 1元素设margin，改用gap（父容器上设） - 若必须用
margin，记得用calc()扣除，例如：height: calc(100% - 60px) -
flex-basis设为0能强制从零开始均分，比默认auto更可控：flex: 1 1 0
grid 布局中用 1fr 分配剩余空间更稳定
相比 flex，grid 在垂直方向分配剩余空间时更少受内容影响。1fr 是真正意义上的“剩余可用空间等份”，不依赖子元素自身尺寸推导。
典型写法：
.container {
display: grid;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}注意点：
-
1fr不等于100%，它只响应容器内“未被固定尺寸占据”的部分 - 如果某行内容超长，
1fr区域会自动撑高，想限制可加minmax(0, 1fr) - 和
flex一样，父容器仍需有明确高度，否则1fr无基准可算
内容溢出导致挤压，其实是 overflow 隐形截断
有时候元素“看起来被挤压”，实际是内容太多，而容器默认 overflow: visible 或 hidden 导致文字折行异常、滚动条没出现。尤其在 flex: 1 区域里，若子元素是 div 且含长段落，容易因 min-width: auto 强制拉宽，反向压缩兄弟元素。
关键修复项：
- 给可能溢出的子元素加
min-width: 0（flex item 默认是min-width: auto） - 用
word-break: break-word或overflow-wrap: break-word控制文本换行 - 需要滚动时，别只设
overflow-y: auto，还要确保父容器有固定高度，且子元素不设height: 100%（会形成循环依赖）
真正难处理的，往往不是怎么写布局，而是没意识到“剩余空间”这个概念本身依赖于整个祖先链的高度传递是否完整——漏掉一层 height: 100% 或一个 display: flex，后面所有 flex: 1 和 1fr 都只是摆设。
