Question 168488 in Html Question posted in
Some basic documentation can be found here.

How can I stop a nested scroll from scrolling the whole page?

Have a look please at the snippet below.
I managed to make the main scroll without its header, but I am unable to make the list on the right scroll internally without the rest of main.
I would like the list of boxes on the right, to scroll on its own, leaving its pink header and the rest of main in place.

I tried applying overflow-auto to the div that holds the children but that didn’t work.
I also tried setting overflow-hidden on its parent, but that just blocks scrolling altogether.

I know there are a lot of question like this one out there, but none of the solutions I found worked for me so I recreated my case here.

html, body {
  height: 100%;
  width: 100%;
}
<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col w-full h-full">
  <header class="h-16 bg-red-300"></header>
  <main class="flex-grow w-full overflow-auto bg-green-300">
    <div class="flex w-full h-full bg-blue-300">
      <div class="h-full w-1/3 bg-purple-300"></div>
      <div class="h-full w-1/3 flex-grow bg-yellow-300"></div>
      <div class="h-full w-1/3 flex flex-col bg-indigo-300">
        <header class="h-12 bg-pink-300"></header>
        <div class="flex-grow bg-gray-300 w-full h-full p-3">
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
        </div>
      </div>
    </div>
  </main>
</div>
Tags:

2

Answers


  1. 0
    • Apply flex-shrink: 0 to the pink <header> so it has a non-zero height.
    • Apply overflow-y: auto to the <div> container of the list to have the list scrollable.
    html, body {
  height: 100%;
  width: 100%;
}
    <script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col w-full h-full">
  <header class="h-16 bg-red-300"></header>
  <main class="flex-grow w-full overflow-auto bg-green-300">
    <div class="flex w-full h-full bg-blue-300">
      <div class="h-full w-1/3 bg-purple-300"></div>
      <div class="h-full w-1/3 flex-grow bg-yellow-300"></div>
      <div class="h-full w-1/3 flex flex-col bg-indigo-300">
        <header class="h-12 bg-pink-300 shrink-0"></header>
        <div class="flex-grow bg-gray-300 w-full h-full p-3 overflow-y-auto">
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
        </div>
      </div>
    </div>
  </main>
</div>
    Login or Signup to reply.
  2. 0

    If I got you correct, you just want the grey list on the right side to scroll internally, without making the whole body scrollable as is the current case.

    I see that you already tried applying overflow-auto to the div that holds the children, and setting overflow-hidden on its parent. I don’t know why it didn’t work for you, but I made similar same changes to your code, and it worked. Maybe you didn’t apply both the properties at same time.

    First, set the main element as overflow-hidden.

    <main class="w-full flex-grow overflow-hidden bg-green-300">

    And second, set the grey list part as overflow-auto.

    <div class="h-full w-full flex-grow overflow-auto bg-gray-300 p-3">

    Here is the tailwind playground with this change.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search