为什么这些元素在垂直方向上收缩，即使它们有 h-20 和收缩 0？

Question

在下面的代码中，我有这样的div：

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

在移动设备上，它们会垂直收缩，直到变成线条：

可能是什么原因？

完整代码：

<div class="flex min-h-screen w-1/2 flex-col items-center justify-center bg-[#404040]">
  <div class="mb-6 w-full max-w-lg overflow-hidden border-0 shadow-none">
    <div class="border-border flex border-b p-0">
      <div class="flex h-full w-full flex-grow flex-col items-start justify-center gap-2 bg-[#404040] p-6">
        <div class="h-1 w-16 rounded-full bg-[#ffffff]"></div>
        <div class="h-1 w-full rounded-full bg-[#878787]"></div>
        <div class="h-1 w-full rounded-full bg-[#878787]"></div>
        <div class="h-6 w-full rounded border border-[#a6a6a6] bg-white"></div>
        <div class="flex w-full flex-col items-center justify-start gap-2 md:flex-row">
          <div class="h-6 w-full rounded border border-[#a6a6a6] bg-[#c1df87] md:w-16"></div>
          <div class="h-6 w-full rounded border border-[#a6a6a6] bg-[#878787] md:w-16"></div>
        </div>
      </div>
    </div>
    <div class="p-6">
      <div class="flex w-full flex-col items-start justify-center gap-4">
        <h2 class="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold leading-tight tracking-tight text-[#ffffff]">Dark</h2>
        <div class="flex w-full flex-col items-center justify-center gap-2 md:flex-row">
          <div class="border-border h-20 w-full flex-1 shrink-0 rounded-full border bg-[#ffffff] md:w-auto"></div>
          <div class="border-border h-20 w-full flex-1 shrink-0 rounded-full border bg-[#404040] md:w-auto"></div>
          <div class="border-border h-20 w-full flex-1 shrink-0 rounded-full border bg-[#c1df87] md:w-auto"></div>
          <div class="border-border h-20 w-full flex-1 shrink-0 rounded-full border bg-[#878787] md:w-auto"></div>
          <div class="border-border h-20 w-full flex-1 shrink-0 rounded-full border bg-[#a6a6a6] md:w-auto"></div>
        </div>
        <button class="ring-offset-background focus-visible:ring-ring bg-primary text-primary-foreground border-border hover:bg-primary/90 flex h-10 w-full items-center justify-center whitespace-nowrap rounded border px-4 py-2 text-sm font-medium transition-colors [box-shadow:4px_4px_0px_rgba(0,0,0,0.1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-circle-dashed-check mr-2 h-4 w-4">
            <path d="M8.56 3.69a9 9 0 0 0 -2.92 1.95"></path>
            <path d="M3.69 8.56a9 9 0 0 0 -.69 3.44"></path>
            <path d="M3.69 15.44a9 9 0 0 0 1.95 2.92"></path>
            <path d="M8.56 20.31a9 9 0 0 0 3.44 .69"></path>
            <path d="M15.44 20.31a9 9 0 0 0 2.92 -1.95"></path>
            <path d="M20.31 15.44a9 9 0 0 0 .69 -3.44"></path>
            <path d="M20.31 8.56a9 9 0 0 0 -1.95 -2.92"></path>
            <path d="M15.44 3.69a9 9 0 0 0 -3.44 -.69"></path>
            <path d="M9 12l2 2l4 -4"></path></svg
          >Theme selected
        </button>
      </div>
    </div>
  </div>
</div>

实时代码

Answer 1

在 Flex 容器内的元素中，应用了 flex-1 和 shrink-0 类：

<div class="... flex-1 shrink-0 ... "></div>

flex-1类消除了对元素增长和收缩能力的任何限制，包括由shrink-0施加的限制。您只需在其前面添加一个断点即可解决该问题。

实时代码