通过为 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 容器会按常规块级行为收缩至视口宽度或内容最小宽度，导致子元素“撑破”容器边界——绿色边框无法包裹橙色宽条，即为典型表现。
根本原因在于：默认情况下，Grid 容器的 width 和 height 遵循常规流式布局规则，其内在尺寸（intrinsic size）不自动继承子元素的最大固有尺寸，尤其在 grid-column-start: 1; grid-row-start: 1 这类重叠定位下，子元素脱离正常尺寸贡献逻辑。
✅ 正确解法是显式提升容器的最小尺寸门槛：
- min-width: fit-content：使容器宽度至少等于其所有子元素中最大的固有宽度（intrinsic width）（例如 111vw 元素的渲染宽度）；
- 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-start: 1;
grid-row-start: 1;
}
#wide {
width: 111vw;
background: orange;
}
#tall {
height: 111vh;
background: lightblue;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- fit-content 是现代浏览器广泛支持的值（Chrome 111+、Firefox 110+、Safari 16.4+），若需兼容旧版 Safari，可降级使用 min-width: max-content（但语义略有差异：max-content 基于无限空间下的理想宽度，fit-content 更贴近实际渲染所需最小宽度）；
- 若子元素含文本且存在换行，fit-content 仍能合理响应内容宽度；但对 position: absolute 或 transform 移动后的元素，其尺寸不参与 fit-content 计算（因其已脱离文档流）；
- 不建议仅依赖 overflow: hidden 掩盖问题——它会裁剪内容而非扩展容器，违背“确保包裹”的设计目标。
总结：min-width: fit-content 与 min-height: fit-content 是解决 Grid 容器尺寸“跟不上”极端子元素的最直接、语义最清晰的方案，既保持布局灵活性，又严格保障容器完整性。
