后台弹窗里有一段活动说明，运营改完文案发上来，第三行字被齐刷刷切掉。翻代码，外层写着 height 120px，overflow 没设，文字超出就顶出容器盖住下面的按钮。这种「div 不跟着内容长」的情况，八成是某处写死了高度。

块级元素本来就是靠内容撑开的

不给 width 和 height 的 div，宽度撑满父级，高度由里面的内容决定，这是默认行为。一旦外面套了固定高度的盒子、或者父级有 overflow hidden，里面再怎么长也看不到。先在开发者工具里把所有祖先节点的高度扫一遍，被谁限制一目了然。

几种常见的卡死点

  • 显式 height。改成 min-height 就能随内容变高，同时保留最小高度。
  • flex 布局。父级 align-items 是 stretch 时子项会被拉成等高，子项自己再写 height auto 也没用，加 align-self start 或者改父级 items 的设置。
  • 绝对定位。position absolute 的元素脱离文档流，不参与父级高度计算，父级自然撑不开，需要额外给 padding 或改用普通流。
  • 行内块。display inline-block 会收缩包裹内容，宽度由文字决定，遇到长英文不换行就会溢出，加 word-break break-all 或 overflow-wrap anywhere。

还有一种现代写法，height 直接用 fit-content，让盒子按内容收缩，配合 max-width 100% 可以避免超出父级。老浏览器不支持，用 max-content 和 auto 组合也能凑合。

内容里有图片时另算

图片默认按原始尺寸渲染，容器宽度不够就溢出。给 img 加 max-width 100% 和 height auto，两张一起写，否则图片会被拉变形。视频和 iframe 同理，iframe 还要注意它内部文档不会自动撑高外层，得靠脚本读 contentWindow 的高度回写。

真要让内容多时出现滚动条

这类需求不是自适应，是限高加滚动。给固定高度配合 overflow auto，移动端再加 -webkit-overflow-scrolling touch 让惯性滚动顺一点。字号不确定时优先用 min-height 加 max-height 双限，别写死一个绝对值。

判断标准很简单：容器该跟着内容长，就只留 min-height；容器该固定，就明确写死并给滚动。两件事混着写，问题就会一直反复。