使用Flex与Tailwind时如何实现表格横向滚动、侧边栏固定

横向滚动穿透到全页、侧边栏随内容偏移，本质是Tailwind flex布局的两个默认特性没有被正确处理：

• flex子元素默认携带min-width: auto属性，不会主动收缩到内容最小宽度以下，会被内部宽表格直接撑大容器，最终溢出到视口层面触发全页滚动
• 滚动容器没有明确的宽度约束，导致溢出的内容没有被限制在预期的滚动区域内，露出了外层深色背景

所有改动均基于现有Tailwind类名调整，不需要额外编写自定义CSS：

• 调整最外层页面容器：移除w-screen类，添加w-full overflow-hidden、min-w-0类，从根源上阻断视口级别的横向滚动
• 给右侧主内容区容器添加min-w-0类：这个是flex布局防溢出的关键，确保主内容区不会被内部表格撑宽到超过自身分配的宽度，把内容宽度约束在侧边栏右侧的可用区域内
• 替换表格滚动容器的类名：把原有的flex-1 flex overflow-x-scroll改为w-full overflow-x-auto，移除不必要的flex属性，显式约束容器宽度等于父级可用宽度，超出的表格内容将触发容器自身的横向滚动
• 移除表格包裹层的flex flex-1类：避免内部flex容器跟随表格宽度被撑大，和外层滚动容器的溢出判断逻辑冲突
• 调整表格类名：把原有的min-w-full改为w-max，实现表格在宽度充足时按内容自然排布、宽度不足时保持最小宽度不压缩的效果，完全匹配横向滚动的触发预期

<body>
  <!-- 最外层容器 -->
  <div class="parent bg-gray-900 flex flex-col h-screen text-gray-100 w-full overflow-hidden">
    <!-- 头部区域保持原有结构不变 -->
    <header class="bg-gray-800 p-4 flex border-b border-solid border-gray-600">
      <span class="flex flex-1">
        <a href="#" class="text-gray-100 flex">Header 1</a>
        <span class="text-right flex-1 mr-4">Header 2</span>
      </span>
    </header>
    <div class="main flex-1 flex">
      <!-- 侧边栏 保持原有结构不变 -->
      <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
      <!-- 主内容区 新增min-w-0 -->
      <div class="content flex-1 min-w-0">
        <div class="flex w-full h-full flex-col">
          <!-- 顶部tab栏 保持原有结构不变 -->
          <div class="header w-full flex bg-gray-700">
            <div class="w-full ml-6 flex flex-row">
              <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600">
                <div>item title</div>
              </a>
              <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600 border-solid border-blue-500 border-b-2 text-blue-500">
                <div>item title</div>
              </a>
            </div>
          </div>
          <div class="content w-full flex-1 flex min-w-0">
            <!-- 滚动容器 替换类名 -->
            <div class="w-full overflow-x-auto">
              <!-- 表格包裹层 移除flex相关类 -->
              <div class="align-middle border-b border-gray-200">
                <!-- 表格 替换宽度类 -->
                <table class="divide-y divide-gray-200 w-max" role="table">
                  <!-- 原有表格头部、表体结构保持不变 -->
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

• 侧边栏始终保持固定宽度，不会随表格滚动偏移
• 仅主内容区的表格区域会触发横向滚动，整个窗口不会出现横向滚动条
• 表格溢出部分被滚动容器边界完整截断，不会露出外层深色页面背景

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