通过为 Grid 容器设置 min-width: fit-content 和 min-height: fit-content，可强制其尺寸至少扩展至所有子元素的最大固有宽度与高度，从而完全包裹溢出的子元素。
通过为 grid 容器设置 `min-width: fit-content` 和 `min-height: fit-content`，可强制其尺寸至少扩展至所有子元素的最大固有宽度与高度，从而完全包裹溢出的子元素。
在使用 CSS Grid 实现 Z 轴堆叠（即多个子元素共享同一网格区域，通过层叠上下文实现视觉叠加）时，一个常见陷阱是：当某个子元素设置了极大的绝对尺寸（如 width: 111vw 或 height: 111vh），而父容器采用默认的块级收缩行为时，父容器不会自动扩展以容纳该子元素——导致子元素“破框而出”，边框无法包围全部内容。
根本原因在于：Grid 容器默认的宽高计算遵循常规流布局规则，其 width 和 height 仍受包含块约束，且 grid 本身不改变盒模型的尺寸收敛逻辑。即使所有子项都定位在 grid-column: 1 / 2、grid-row: 1 / 2，容器也不会主动取子项的最大尺寸作为自身最小尺寸。
✅ 正确解法是显式声明容器的最小尺寸下限：
- min-width: fit-content：使容器最小宽度等于其内容（所有子项）的最大固有宽度（intrinsic width），包括被设为 vw/vh 的宽高值（浏览器会将其解析为实际像素后参与计算）；
- min-height: fit-content：同理，确保垂直方向也能自适应最高子项（如 height: 111vh 的元素）。
以下是完整、健壮的修复代码：
立即学习“前端免费学习笔记（深入）”；
#z-stack {
display: grid;
border: 5px solid green;
min-width: fit-content; /* 关键：水平方向兜底 */
min-height: fit-content; /* 关键：垂直方向兜底 */
}
#z-stack > * {
grid-column: 1;
grid-row: 1;
}
#wide {
width: 111vw;
background: orange;
}
#tall {
height: 111vh;
background: lightblue;
}<div id="z-stack"> <div id="wide"></div> <div id="tall"></div> </div>
⚠️ 注意事项：
- fit-content 是现代标准属性，兼容性良好（Chrome 66+、Firefox 63+、Safari 14.1+、Edge 79+），旧版 Safari 可考虑回退 min-width: -webkit-fit-content；
- 若需支持更老浏览器，可用 JavaScript 动态计算子项 getBoundingClientRect() 并设置 style.minWidth，但应优先使用 CSS 方案；
- 避免同时设置 width: 100% 或 max-width: 100% 等限制性尺寸，否则会覆盖 min-width: fit-content 的效果；
- 对于响应式场景，fit-content 会随视口变化实时重算，无需额外监听 resize。
总结：min-width: fit-content 和 min-height: fit-content 是解决 Grid 容器“包不住子元素”问题的语义化、声明式方案——它不依赖 JS、不破坏布局流，且精准匹配设计意图：让容器成为其内容的自然容器。
