basis-[800px] prevent element from shrinking in flex layout

I have the following element:

    <div className='mx-auto flex flex-col-reverse gap-5 md:flex-row md:items-start'>
      <div className='flex min-w-0 shrink grow-0 basis-[800px] flex-col'>
        ...
      </div>
        <StickyPanel className='flex min-w-0 shrink-[3] grow basis-0 flex-col gap-2'>
          <RightBar />
        </StickyPanel>
      
    </div>

My expectation was:

• first element will have initailly 800px and does not grow over that size (due to grow-0).
• second element will fill the remaining space (due to grow)
• when the screen size is smaller, both elements will shrink down but the second one will shrink faster

Unfortunately, only the second element shrinks while the first one have alway 800px. When I switch to % basis values like basis-[70%] and basis-[30%] then it works and both elements shrinks down. How to fix that? What am I missing?

The behavior you're actually seeing is the <StickyPanel> growing less as the viewport shrinks in width. The calculations of the layout is as follows:

• E.g. for 1200px total width:
  1. Have the first element be 800px width (from basis-[800px]).
  2. Have the <StickyPanel> element be 0px width (from basis-0).
  3. Distribute the remaining 380px empty horizontal space between the two elements:
     • First has grow-0, do not increase its width.
     • <StickyPanel> has grow and is the only element, add the remaining 380px.
  4. <StickyPanel> is 380px width.
• Compare this with 900px:
  1. Have the first element be 800px width (from basis-[800px]).
  2. Have the <StickyPanel> element be 0px width (from basis-0).
  3. Distribute the remaining 80px empty horizontal space between the two elements:
     • First has grow-0, do not increase its width.
     • <StickyPanel> has grow and is the only element, add the remaining 80px.
  4. <StickyPanel> is 80px width.

Thus, if you want a shrinking ratio, you should set an appropriate basis on <StickyPanel>, say 200px and remove the shrink-[3]. This is because it's easier to reason with one variable, flex-basis, than adding flex-shrink ratios aswell into the mix.

• So in the 900px total width case:
  1. Have the first element be 800px width (from basis-[800px]).
  2. Have the <StickyPanel> element be 200px width (from basis-[200px]).
  3. The elements overflow the container by 120px. Shrink both by their flex-shrink factor. Both have flex-shrink: 1. Distribute the 120px reduction needed by a ratio of their flex-basis. This comes out as 96px:24px.
  4. First element becomes 800px - 96px = 704px.
  5. <StickyPanel> becomes 200px - 24px = 176px.

<script src="https://unpkg.com/@tailwindcss/browser@4.1.10"></script>

<div class='mx-auto flex flex-col-reverse gap-5 md:flex-row md:items-start'>
  <div class='flex min-w-0 shrink grow-0 basis-[800px] flex-col'>
    ...
  </div>
  <div class='flex min-w-0 grow basis-[200px] flex-col gap-2'>
    <RightBar>RightBar</RightBar>
  </div>
</div>