如何用Tailwind实现左fixed右滚动的Flex布局（解决兼容问题）

fixed定位的元素会脱离文档流，flex容器无法对其进行空间分配，所以不能依赖flex的flex-auto来控制左侧宽度。推荐两种直接可行的实现方式：

方式一：双fixed定位布局（最直接） #

分别给左右两侧设置fixed定位，通过calc计算尺寸避开navbar和对方的空间：

• 左侧fixed元素：

  <div class="fixed left-0 top-16 bottom-0 w-[calc(100vw-600px)] bg-blue-200">
    <!-- 左侧内容 -->
  </div>
  

  • top-16对应navbar的高度（如果navbar高度变化，可换成var(--navbar-height)并在navbar定义该变量）
  • w-[calc(100vw-600px)]自动占满右侧600px以外的剩余视口宽度
  • left-0 bottom-0确保高度铺满navbar以下的屏幕区域

• 右侧可滚动元素：

  <div class="fixed right-0 top-16 bottom-0 w-[600px] overflow-y-auto bg-red-200">
    <!-- 右侧长内容 -->
  </div>
  

  • right-0固定在屏幕右侧，w-[600px]保持固定宽度
  • overflow-y-auto实现内容超出时滚动
  • 同样用top-16 bottom-0控制高度范围

方式二：左侧fixed+右侧margin偏移（兼容原有flex结构） #

如果想保留部分flex布局逻辑，可给右侧元素设置margin避开左侧fixed的空间：

1. 左侧fixed元素尺寸同方式一，占满剩余宽度
2. 右侧放在一个全屏的flex容器内，设置ml-[calc(100vw-600px)] w-[600px] overflow-y-auto h-[calc(100vh-16px)]
3. 容器设置pt-16避开navbar，确保内容从下方开始

这种方式下，右侧依托flex容器但通过margin手动避开左侧fixed区域，同时保持自身可滚动特性。

内容的提问来源于stack exchange，提问作者Discombobulous