Tailwind Flex布局中basis-[800px]元素无法缩小的问题排查与解决请求

大家好，我最近在用Tailwind做Flex布局时碰到个棘手的问题，想请教下各位：

我写了如下布局代码：

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

我原本的预期是：

• 屏幕足够大时，第一个元素初始宽度是800px，且因为grow-0不会超出这个尺寸；
• 第二个元素会填充剩余的可用空间（靠grow属性）；
• 屏幕缩小时，两个元素都会自动缩小，且第二个元素的缩小速度更快（因为shrink-[3]）。

但实际效果完全不是这样：只有第二个元素会跟着屏幕缩小，第一个元素死死保持800px宽度，完全不响应屏幕尺寸变化。

有意思的是，当我把固定像素的basis-[800px]换成百分比值（比如basis-[70%]），第二个元素用basis-[30%]时，两个元素都能正常按预期缩小。

我到底哪里理解错了？有没有办法让用固定像素basis的第一个元素，也能在屏幕变小时自动缩小呢？

内容来源于stack exchange