如何确保Grid容器始终能容纳所有子元素？

当使用Grid布局将所有子元素堆叠在同一单元格（Z轴方向）时，若某个子元素设置了固定宽/高（比如示例中的width:111vw），Grid容器默认不会自动扩展尺寸去适配这个子元素，导致子元素超出容器范围。

解决方案：给Grid容器设置min-width: min-content（按需添加min-height: min-content） #

修改后的完整代码如下：

CSS

#z-stack {
    display: grid;
    border: 5px solid green;
    /* 让容器最小宽度匹配最宽子元素的宽度 */
    min-width: min-content;
    /* 若需要同时适配高度，可添加此行 */
    min-height: min-content;
}
#z-stack > * {
    grid-column-start: 1;
    grid-row-start: 1;
}

#wide {
    width: 111vw;
    background: orange;
}

#tall {
    height: 111vh;
}

HTML

<div id="z-stack">
    <div id="wide"></div>
    <div id="tall"></div>
</div>

原理说明 #

min-content是CSS固有尺寸关键字，它会让容器的最小尺寸等于内部所有子元素中最大的固有宽/高。对于设置了固定宽度的子元素，它的固有宽度就是自身的width值，因此Grid容器会自动扩展到能完全包裹这个宽子元素的大小，绿色边框也就可以完整包住橙色元素了。

内容的提问来源于stack exchange，提问作者Aran-Fey