保持一列固定，而另一列滚动

Question

我正在研究 Tailwind CSS 1.1.2 并想知道如何创建一个两列布局，其中一列固定而另一列垂直滚动。

Answer 1

TailwindCSS 的创建者 Adam Wathan 制作了一个 Slack clone 完全符合您的要求，这里有一个更基本的示例及其工作原理的解释：

示例：

<div class="h-screen flex">
  <!-- Fixed sidebar -->
  <div class="bg-gray-600 w-64">
    <!-- Sidebar content -->
  </div>
  <!-- Scroll wrapper -->
  <div class="flex-1 flex overflow-hidden">
    <!-- Scrollable container -->
    <div class="flex-1 overflow-y-scroll">
      <!-- Your content -->
    </div>
  </div>
</div>

说明父元素有 flex 和 h-screen 类所以它填满了屏幕的高度。

固定列在其中应用了一些宽度，或者它可以是共享屏幕某些部分的弹性列。

可滚动列包裹在 div 中，带有类 flex-1 flex 和 overflow-hidden 以确保它填充可用 space 但隐藏溢出的内容。

在可滚动包装器内还有另一个 div，它是带有 flex-1 的可滚动内容区域，因此它扩展到可用的 space 和 overflow-y-scroll 以在溢出时滚动。这里有一个稍微更有风格的fiddle希望这有帮助。

保持一列固定，而另一列滚动

Keeping one column fixed while th other scrolls

tailwind-css