If you take a look at the following Tailwind CSS, you'll notice that when you scroll down, the sidebar is not fully visible at the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Example</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f5e0e8edf6e8efe5e2f2f2c1b3afb3afb0b8">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex">
<!-- Sidebar -->
<div class="h-screen w-64 border-r border-gray-200 bg-white p-4">
<h1 class="text-xl font-semibold">Sidebar</h1>
<ul class="mt-4">
<!-- Manually added list items for demonstration -->
<li class="py-2">Item 1</li>
<li class="py-2">Item 2</li>
<li class="py-2">Item 3</li>
<!-- Add more items as needed -->
</ul>
</div>
<!-- Main content -->
<div class="flex-1 p-8" style="min-height: 200vh;">
<h2 class="text-2xl font-bold">Main Content</h2>
<p>This is the main content area.</p>
<!-- Additional content here -->
<p>Scroll down to see more content...</p>
</div>
</body>
</html>
https://i.sstatic.net/gf3XB.png
How can this be avoided?