Search code examples
tailwind-css

Keeping one column fixed while th other scrolls

I'm playing around with Tailwind CSS 1.1.2 and wondering how to create a two-column layout where one column is fixed while the other scrolls vertically.

See https://vimeo.com/350933479#t=46s for reference.

Solution

  • The creator of TailwindCSS Adam Wathan made a Slack clone that does exactly what you're looking for, here's a more basic example and an explanation of why it works:

    Example:

    <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>

    Explanation The parent element has the flex and h-screen classes so it fills the height of the screen.

    Inside it the fixed column has some width applied or it could be a flex column that shares some portion of the screen.

    The scrollable column is wrapped in a div with the classes flex-1 flex and overflow-hidden to make sure it fills the available space but hides overflowed content.

    inside the scrollable wrapper have another div which is your scrollable content area with flex-1 so it expands to the available space and overflow-y-scroll to scroll when overflowed. Here's a slightly more styled fiddle hope this helps.