flex子元素高度不随内容撑开是因align-items: stretch默认拉伸，需设flex-start等；grid中minmax(auto, max-content)比auto更稳；height: 100%在无显式高的flex/grid容器中失效，应改用align-self/stretch或fit-content。
flex布局中子元素高度不随内容撑开？检查align-items和min-height
默认情况下，display: flex容器的子元素会受align-items: stretch影响——这会让所有子项在交叉轴（通常是垂直方向）拉伸到容器高度。如果容器本身高度固定或由父级约束，子元素就“被撑高”，而非“按内容自适应”。
解决方法很简单：
- 把
align-items设为flex-start或baseline，让子元素回归内容高度 - 确保容器没设
min-height或height，否则会压制内容自然伸展 - 若子元素是
flex容器自身，还要确认它的align-self没被覆盖
常见错误：给.container { display: flex; height: 100vh; }，结果内部卡片高度全被拉满，哪怕只有一行文字。
grid布局里grid-template-rows写auto还是minmax()？
auto确实能让行高随内容变化，但容易在内容极少时塌缩（比如空div），而minmax(min-content, max-content)又太重、兼容性差。实际更稳的选择是minmax(0, max-content)或直接minmax(auto, max-content)。
关键点：
-
grid-template-rows: auto;→ 行高 = 内容高度，但无法处理溢出或overflow: hidden场景 -
grid-template-rows: minmax(auto, max-content);→ 兼容性好（Chrome 66+ / Firefox 78+），允许内容撑开，也防塌陷 - 避免用
1fr代替auto——它会强制均分剩余空间，不是“适应内容”
示例：.grid { display: grid; grid-template-rows: minmax(auto, max-content) minmax(auto, max-content); }，两行各自按内容伸缩，互不影响。
flex和grid混用时，为什么内部height: 100%失效？
在flex或grid容器里，height: 100%依赖父级有明确高度。但flex/grid容器本身若没显式高度（比如仅靠内容撑开），子元素的100%就无从计算，结果就是0或默认行高。
替代方案更可靠：
- 用
align-self: stretch（flex）或justify-self: stretch（grid）代替height: 100% - 对需要填满的子项，直接设
height: fit-content或不设高度，靠布局模型自动适配 - 若必须用百分比高度，往上逐级检查：父容器是否设了
height或min-height？是否被overflow: hidden截断？
典型陷阱：.card { height: 100%; }放在display: grid的.list里，但.list没设高度，导致.card压成一条线。
动态高度遇上滚动容器：max-height和overflow怎么配？
当内容高度不可预知，又需要限制最大展开范围时，max-height + overflow-y: auto是常用组合。但注意：flex/grid容器对max-height的响应不如普通块级元素灵敏。
- flex容器需加
flex-shrink: 1，否则可能溢出而不触发滚动 - grid容器建议在外层包一层
div设max-height，避免直接在grid上设（部分旧版浏览器支持弱） -
max-height: fit-content目前仅Firefox支持，不要依赖
稳妥写法：.scroller { max-height: 300px; overflow-y: auto; } .scroller > * { display: flex; }——滚动逻辑交给外层，内部保持布局自由。
内容高度不是靠“撑”出来的，而是靠布局模型放弃干预、让内容自然决定的。最容易忽略的是容器自身的高度来源——它是不是真的“没设高”，还是被某个祖先的height: 100%悄悄锁死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
