Why are these elements shrinking vertically even though they have h-20 and shrink-0?

Question

In the follow code, I have divs like this:

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

On mobile, they shrink vertically until they are just lines:

What could be the reason?

Full code:

<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>

Live code

Answer 1

In your elements inside the flex container, you have both flex-1 and shrink-0 classes applied:

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

The flex-1 class removes any constraints on the element's ability to grow and shrink, including those imposed by shrink-0. You can simply add a breakpoint in front of it to fix the issue.

Live code