Css 使用flex时如何使表格滚动？

我尝试创建一个布局，在主视图中有一个表。表可能比实际的主视图宽，在这种情况下，我希望滚动主视图，而不是侧边栏

现在桌子满了，我滚动了整个窗口，这不是很漂亮

此代码笔显示了我的问题：

标题2
导航栏
第1列
可乐
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
XXX
百分比
10
0
0
10
10
10
5.

如果将窗口设置得足够小，您将看到表停止收缩，这是可以的，但是溢出是针对整个页面的，溢出区域中的背景也不是正确的背景。

---

我正在使用tailwind来设置页面样式。

可以将

溢出自动

类添加到

内容

中，以便在

内容

区域进行滚动：

<div class="main flex-1 flex">
    <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
    <div class="content flex-1 overflow-auto">
       <!-- The other code is omitted for the brevity -->
    </div>
</div>

导航栏

例如：

标题2
导航栏
第1列
可乐
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
XXX
百分比
10
0
0
10
10
10
5.

了解flex结构的工作原理将是页面布局的良好开端。看

标题1
标题2
导航栏
第1列
可乐
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
科尔XXX
XXX
百分比
10
0
0
10
10
10
5.

感谢您的意见。

<div class="main flex-1 flex">
    <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
    <div class="content flex-1 overflow-auto">
       <!-- The other code is omitted for the brevity -->
    </div>
</div>

<div class="h-screen flex flex-col overflow-hidden bg-gray-100">
  <!-- Header -->
  <header class="h-12 bg-gray-200">
    <div class="flex justify-between items-center h-full">
      <div>Header 1</div>
      <div>Header 2</div>
    </div>
  </header>

  <!-- Body -->
  <div class="flex flex-1">
    <!-- Navigation -->
    <nav class="w-60 bg-gray-300">Navbar</nav>

    <!-- Main -->
    <main class="bg-gray-400 overflow-auto w-full">
      <div class="overflow-x-scroll w-full">
        <table class="divide-y divide-gray-200 w-full" role="table">
          <thead>
            <tr role="row">
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">Col 1</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">Col2</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200" role="rowgroup">
            <tr role="row">
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">XXX</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">PERCENTAGE</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">5</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</div>