CODEWITHSUNDEEP
tailwind-css
Sig
Sig

Reputation: 5928

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.

Upvotes: 9

Views: 24232

Answers (2)

yaki06
yaki06

Reputation: 29

Wanted to respond for any poor souls that stumble upon this page.

u/JHeth solution works, but it looks like a weird solution and is only fit for that type of application.

Giving a solution that seems more reasonable for people that have a grid layout in mind that needs to scale for either multiple columns or mobile response.

<div class="grid grid-cols-2 bg-sky-700">
   <div class="sticky top-0 col-span-1 h-screen bg-blue-500">
     LEFT COLUMN CONTENT HERE THAT DOESNT MOVE
   </div>
   <div class="col-span-1 bg-slate-800">
     SCROLLY CONTENT HERE
      <div class="h-dvh bg-blue-800">SCROLLY DIV 1</div>
      <div class="h-dvh bg-red-500">SCROLLY DIV 2</div>
   </div>
</div>

Some Context: Sticky makes the left column interact with the grid system. Fixed will for some reason break its flow and ignore the width.

You can make this as many columns as you want by changing grid-cols-x in the parent and giving every direct child whatever span you want. I recommend watching a 30 second video on the tailwind grid-system.

I also like this approach more because its easier to set up breakpoints for when you want the columns to merge into single column instead of 20%-80%.

Heres a sample: https://play.tailwindcss.com/UHE4fA6ot4

Upvotes: 2

JHeth
JHeth

Reputation: 8366

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.

Upvotes: 36

Related Questions