Flex子项默认被拉高是因为align-items: stretch；要按内容高度需设align-self: flex-start或align-items: flex-start；滚动区需height: calc(100vh - Xpx)；Grid更适配多行等高场景。
Flex 子项默认会拉伸填满交叉轴（通常是高度），这不是“自适应”，而是 align-items: stretch 的强制行为。真要让子项只占自身内容高度、不被撑开，得主动关掉这个默认。
为什么 flex 子项总是被拉高？
因为 Flex 容器的 align-items 默认值是 stretch，只要子项没设明确高度（比如 height 或 min-height），它就会在交叉轴方向撑满容器。哪怕你只写了一行字，也会和旁边 10 行内容的兄弟一样高。
- 常见错误现象：
.parent { display: flex; } .child { background: #eee; }→ 所有.child高度一致，不管内容多少 - 关键判断点：检查父容器是否设置了固定高度（如
height: 400px）或存在其他拉伸源（如flex: 1的兄弟项） - 真正需要的不是“撑高”，而是“按内容自然高度”——这必须显式覆盖默认对齐
用 align-self: flex-start 关掉拉伸
这是最轻量、最直接的解法。它只作用于单个子项，不影响其他兄弟，也不需要改容器属性。
- 给想保持内容高度的子项加
align-self: flex-start（或center、baseline） - 如果所有子项都要按内容高度，就统一设
align-items: flex-start在容器上 - 注意：该属性对
display: block元素无效，只对 Flex 子项起作用 - 兼容性极好（Chrome 29+/Firefox 20+/Safari 6.1+），无 JS 依赖
滚动区域里 height: calc(100vh - Xpx) 是刚需
当子项内还要嵌套可滚动内容（比如聊天记录、日志列表），单纯 overflow-y: auto 不生效——因为浏览器不知道“多高才算溢出”。必须给它一个明确的高度上限。
- 别用
height: 100%：嵌套 Flex 中百分比高度极易失效，尤其跨多层时 - 改用
height: calc(100vh - 174px)这类写法，其中174px是 header、footer、padding、border 等所有已知静态占用之和 - 如果布局响应式（比如移动端隐藏 header），必须配
@media动态调整 calc 值，否则滚动区会错位或截断 -
overflow-y: auto比scroll更安全：只在真正超限时显示滚动条，避免空滚动条干扰视觉
换行后高度分配不均？Grid 比 Flex 更靠谱
Flex 的 flex-wrap: wrap 配合 align-content 只能控制行间距，无法让第二行子项自动占满剩余高度。这时候硬刚 Flex 很容易陷入 hack 套娃。
- 换成 Grid：用
grid-template-rows: auto+grid-auto-rows: 1fr，第一行按内容定高，后续行自动分剩余空间 - 列数响应式靠
repeat(auto-fit, minmax(min(300px, 100%), 40%))，不用写 media query - 注意避开
height: 100%或min-height: 100%这类写法，它们会锁死 Grid 的自动行高计算 - 现代项目可直接用（Chrome 57+/Firefox 52+/Safari 10.1+），兼容性不是问题
真正难的不是写哪一行 CSS，而是搞清当前高度到底被谁控制：是容器的 align-items，是子项的 flex 值，还是滚动区缺了 calc()？先定位源头，再动刀，否则越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
