使用Tailwind实现可滚动侧边栏与全屏主内容区的问题

你的问题出在侧边栏的布局结构上，overflow-auto 需要元素有明确的高度约束才能生效，当前设置没有给 <ul> 足够的高度限制，导致滚动效果无法触发。以下是修复方案：

关键修改点 #

• 将 <aside> 的 flex 方向改为垂直排列（flex-col），并移除 items-center（该属性会让子元素垂直居中，限制 <ul> 的高度扩展）
• 给 <ul> 添加 flex-1，让它填充 <aside> 的剩余垂直空间，同时保留 overflow-auto
• 确保 <aside> 继承父容器的可用高度（父级是 flex-1 容器，<aside> 会自动获取对应高度，垂直排列的布局才能让子元素合理分配空间）

修改后的完整代码 #

<div class="flex h-full w-full flex-col">
  <!-- Website -->
  <header class="bg-neutral-300">Header</header>
  <div class="flex flex-1 gap-5">
    <!-- Sidebar and main -->
    <aside class="flex w-1/6 flex-col">
      <ul class="flex flex-1 flex-col gap-10 overflow-auto bg-red-300 text-sm">
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
        <li>List Item 6</li>
        <li>List Item 7</li>
        <li>List Item 8</li>
        <li>List Item 9</li>
        <li>List Item 10</li>
        <li>List Item 11</li>
        <li>List Item 12</li>
        <li>List Item 13</li>
        <li>List Item 14</li>
        <li>List Item 15</li>
        <li>List Item 16</li>
        <li>List Item 17</li>
        <li>List Item 18</li>
        <li>List Item 19</li>
        <li>List Item 20</li>
      </ul>
      <div class="bg-red-600 p-2 text-xs">arrow to toggle sidebar</div>
    </aside>
    <main class="flex-1 overflow-hidden bg-green-300">This is main</main>
  </div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
  width: 100%;
}

原理说明 #

• flex-col 让侧边栏内的元素垂直分布，确保 <ul> 和切换按钮上下排列
• flex-1 给 <ul> 分配了侧边栏除切换按钮外的所有垂直空间，当列表内容超出该空间时，overflow-auto 会自动触发滚动
• 移除 items-center 避免限制 <ul> 的高度，让它能充分利用可用空间

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