侧边栏导致页面底部出现水平滚动条的问题排查与修复

问题背景 #

布局结构中第一个子元素为侧边栏（sidebar），第二个为表格，核心代码如下：

<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
  <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto">
    <!-- Sidebar (md:max-w-64) -->
  </div>
  <div class="flex w-full flex-col items-start justify-start gap-6">
    <!-- Table -->
  </div>
</div>

当前侧边栏导致布局底部出现第二条水平滚动条，移除侧边栏后该滚动条消失。

问题原因 #

1. flex布局宽度计算溢出：在md及以上屏幕的flex-row布局中，侧边栏容器设置md:w-auto，若侧边栏内部内容实际宽度超过预期（比如未正确限制最大宽度），加上表格容器的w-full（占满父容器宽度），两者总宽度会超出父容器的可用宽度，触发整体水平滚动。
2. 滚动条叠加：表格本身可能因内容过长已存在水平滚动，侧边栏导致的整体布局溢出会额外生成一条滚动条，形成两条滚动条的情况。

修复方案 #

方案1：限制侧边栏宽度并处理内部溢出 #

给侧边栏容器添加md:max-w-64明确最大宽度，同时添加overflow-x-auto让侧边栏内部内容超出时自身滚动，避免影响整体布局：

<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
  <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto md:max-w-64 overflow-x-auto">
    <!-- Sidebar content -->
  </div>
  <div class="flex w-full flex-col items-start justify-start gap-6">
    <!-- Table -->
  </div>
</div>

方案2：让表格容器自适应剩余宽度 #

将表格容器的w-full替换为flex-1，在flex横向布局中，表格会自动占据侧边栏之外的剩余宽度，避免总宽度溢出：

<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
  <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto md:max-w-64">
    <!-- Sidebar content -->
  </div>
  <div class="flex flex-1 flex-col items-start justify-start gap-6">
    <!-- Table -->
  </div>
</div>

方案3：控制整体布局溢出，仅让表格区域滚动 #

给父容器添加overflow-hidden阻止整体滚动，同时给表格容器添加overflow-x-auto，让表格内容单独滚动：

<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row overflow-hidden">
  <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto md:max-w-64">
    <!-- Sidebar content -->
  </div>
  <div class="flex w-full flex-col items-start justify-start gap-6 overflow-x-auto">
    <!-- Table -->
  </div>
</div>

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