Learn
Dashboard
Dashboard
Let's take a look at this example.
<!-- shell container -->
<div class="min-h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="flex flex-col flex-grow">
<div>
<div class="bg-gray-200">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto">
<div>Left Lorem ipsum dolor sit</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Let add some color
<!-- shell container -->
<div class="min-h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="flex flex-col flex-grow bg-amber-200">
<div>
<div class="bg-gray-200">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto">
<div>Left Lorem ipsum dolor sit</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Let's add some content to make it overflow.
<!-- shell container -->
<div class="min-h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="flex flex-col flex-grow bg-amber-200">
<div>
<div class="bg-gray-200">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto">
<div>
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>We see the scrollbar now, but the scroll container is the HTML root.
We want to constrain the scroll container to the left sidebar, how?
First, we know that the HTML root is the scroll container, because it is the only one which has deterministic height which is the browser window height.
Only element which has deterministic height establish the scroll container. Which mean, min-h-screen doesn't work.
We must use h-screen or max-h-screen to establish when the scroll will happen.
<!-- shell container -->
<div class="h-screen flex flex-col bg-green-100 overflow-y-auto">
<!-- shell content -->
<div class="flex flex-col bg-amber-200 overflow-y-auto"></div>
</div><!-- shell container -->
<div class="h-screen flex flex-col bg-green-100 overflow-y-auto">
<!-- shell content -->
<div class="flex flex-col flex-grow bg-amber-200 overflow-y-auto"></div>
</div>This is interesting, what is the shell container is not a flexbox?
<!-- shell container -->
<div class="h-screen bg-green-100 overflow-y-auto">
<!-- shell content -->
<div class="bg-amber-200 overflow-y-auto">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Let's see what happen when I turn it into a flexbox.
<!-- shell container -->
<div class="h-screen flex flex-col bg-green-100 overflow-y-auto">
<!-- shell content -->
<div class="bg-amber-200 overflow-y-auto">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Don't need to be a flex box column.
<!-- shell container -->
<div class="h-screen flex bg-green-100 overflow-y-auto">
<!-- shell content -->
<div class="bg-amber-200 overflow-y-auto">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Make it a grid work as well.
<!-- shell container -->
<div class="h-screen grid bg-green-100 overflow-y-auto">
<!-- shell content -->
<div class="bg-amber-200 overflow-y-auto">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Let's see this example again, the HTML root is the scroll container.
<!-- shell container -->
<div class="h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="bg-amber-200">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>How to make the scroll container the inner div of left sidebar?
<!-- shell container -->
<div class="h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="bg-amber-200">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- shell container -->
<div class="h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="bg-amber-200">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Let's see how can we move the scroll container downward.
<!-- shell container -->
<div class="h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="bg-amber-200 h-full">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- shell container -->
<div class="h-screen flex flex-col bg-green-100">
<!-- shell content -->
<div class="bg-amber-200 overflow-y-auto">
<div class="h-full">
<div class="bg-red-200 h-full">
<div class="h-full">
<!-- dashboard -->
<div class="h-full w-full">
<div class="grid grid-cols-[280px_1fr_280px] h-full">
<div class="overflow-y-auto h-full">
<div class="bg-blue-200">
Left Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Dolor nobis esse obcaecati deserunt harum
vel explicabo enim quidem, magnam, maiores velit, cupiditate
possimus blanditiis aperiam dicta at eaque tempore officiis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolor nobis esse obcaecati deserunt harum vel explicabo enim
quidem, magnam, maiores velit, cupiditate possimus blanditiis
aperiam dicta at eaque tempore officiis! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dolor nobis esse
obcaecati deserunt harum vel explicabo enim quidem, magnam,
maiores velit, cupiditate possimus blanditiis aperiam dicta at
eaque tempore officiis! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Dolor nobis esse obcaecati
deserunt harum vel explicabo enim quidem, magnam, maiores
velit, cupiditate possimus blanditiis aperiam dicta at eaque
tempore officiis!
</div>
</div>
<div>Center</div>
<div>Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>