为何设置h-20与shrink-0的元素在移动端仍垂直收缩？

我用Tailwind CSS编写的颜色块元素：

<div class="border-border h-20 w-full flex-1 shrink-0 rounded-full border bg-[#ffffff] md:w-auto"></div>

在桌面端显示正常，但移动端会垂直收缩成细线。这些颜色块的父容器类为 flex w-full flex-col items-center justify-center gap-2 md:flex-row。

问题根源 #

1. flex主轴方向的影响：
   • 移动端下父容器是 flex-col（垂直方向flex布局），此时flex主轴为垂直方向，子项的 flex-1 属性会作用在垂直方向，尝试让子项填充父容器的垂直空间。但父容器在垂直flex布局下高度由内部内容决定，没有固定高度，导致子项垂直高度被压缩。再加上子项设置了 w-full 占满宽度，rounded-full 会把高度极小的元素渲染成细线。
2. 桌面端正常的逻辑：
   • 桌面端父容器切换为 md:flex-row（水平flex布局），主轴变为水平方向，flex-1 作用在水平方向分配空间，子项的 h-20 固定了垂直高度，因此能正常显示为色块。

修复方案 #

将子项的 flex-1 改为仅在桌面端生效的 md:flex-1，避免移动端垂直方向被拉伸或压缩：

<div class="border-border h-20 w-full shrink-0 rounded-full border bg-[#ffffff] md:flex-1 md:w-auto"></div>

修改后，移动端子项保持固定高度 h-20 和满宽，桌面端则通过 md:flex-1 分配水平空间，两端显示效果正常。

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