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>
2
Answers
flex-shrink: 0
to the pink<header>
so it has a non-zeroheight
.overflow-y: auto
to the<div>
container of the list to have the list scrollable.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 settingoverflow-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 asoverflow-hidden
.And second, set the grey list part as
overflow-auto
.Here is the tailwind playground with this change.