Flex列容器为何使auto-fit布局的Grid仅显示单列？

你的问题核心是Flex容器的交叉轴对齐规则限制了Grid容器的可用宽度，导致Grid的自动分栏逻辑无法生效，下面拆解两种解决方案的原理：

为什么原本Grid会变成单列？ #

当你把Grid放在flex-direction: column的Flex容器中，且设置了align-items: flex-start时：

• Flex容器的主轴是垂直方向，交叉轴是水平方向
• align-items: flex-start会让Flex子项（也就是你的.grid容器）在交叉轴上收缩到内容宽度——此时Grid容器的宽度仅等于单个"hello"元素的宽度（100px，正好是minmax的最小值）
• Grid的repeat(auto-fit, minmax(100px, 1fr))需要容器有足够宽度才能自动计算分栏数量，当容器宽度只有100px时，只能放下1列，所以所有元素都挤在单列里

方案1：添加.grid { width: 100% }的原理 #

给Grid容器设置width: 100%后，它会强制占满Flex容器的可用水平宽度（Flex容器默认宽度是父元素的100%）。此时Grid容器有了足够的宽度空间，minmax(100px, 1fr)就能根据总宽度计算出最多能容纳多少个100px的列，auto-fit会自动生成对应数量的列，恢复多列布局。

方案2：移除.wrapper { align-items: flex-start; }的原理 #

Flex容器的align-items默认值是stretch，当flex-direction: column时：

• stretch会让所有Flex子项在交叉轴（水平方向）上拉伸至填满容器的可用宽度
• 你的.grid容器会自动获得Flex容器的全部水平宽度，Grid的自动分栏逻辑就能正常工作，自然呈现多列布局

内容的提问来源于stack exchange，提问作者Max888