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?