Applying scroll to specific section of flex container

Admin 1
Viewed 9660
<div class="flex flex-grow h-full w-100">
  <div class="flex flex-col bg-white w-1/5">
    <div class="dates px-4">
      <p>Today</p>
      <p>Tomorrow</p>
      <p>Upcoming</p>
    </div>
    <hr />
    <div class="projects flex-grow px-4">
      <p>Project 1</p>
      <p>Project 2</p>
    </div>
    <div class="footer">
      <hr />
      <button class="outline-none py-2 border-gray-400 text-red-400 w-full">
        Add project
      </button>
    </div>
  </div>
  <div class="main bg-gray-100 flex-grow">Hello</div>
  <div class="bg-white w-1/5">Hello</div>
</div>

In the above code, I want only the div with class projects to be scrollable while holding the dates and footer fixed on their places. how to do that using tailwind.css ?! I also want the div with class main to be scrollable vertically while holding the other two divs fixed on their places without scrolling.

tailwind-css css
3 Answers

It sounds a bit like a common usage of overflow-y.

For example, you could add this CSS rule to your project's class:

.projects {
   overflow-y: scroll;
}

You can add this rule to whichever container you want to be scrollable - in this case vertically.

On the other, there is overflow-x: scroll for horizontal scrolling, or overflow: scroll for both (shorthand).

user_61702330

According to tailwind overflow guide, you can use .overflow-y-auto for vertical scrolling.

e.g. <div class="projects flex-grow overflow-y-auto px-4">

It's good that you have used .flex-grow otherwise you would have to give a max-height to the div.

user_53261910 
<div class="flex flex-grow h-full w-100">
  <div class="flex flex-col bg-white w-1/5">
    <div class="dates px-4">
      <p>Today</p>
      <p>Tomorrow</p>
      <p>Upcoming</p>
    </div>
    <hr/>
    <div class="projects h-auto overflow-x-auto flex-grow px-4">
      <p>Project 1</p>
      <p>Project 2</p>
    </div>
    <div class="footer">
      <hr/>
      <button class="outline-none py-2 border-gray-400 text-red-400 w-full">
        Add project
      </button>
    </div>
  </div>
  <div class="main bg-gray-100 flex-grow">Hello</div>
  <div class="bg-white w-1/5">Hello</div>
</div>
user_172202040
Related