Menu
I have this simple HTML and I am using tailwindcss.
<!DOCTYPE html>
<html class="h-full" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full">
<div id="app" class="h-full flex">
<div class="w-[312px] bg-red-100">
<h1 class="text-3xl font-bold">
Sidebar
</h1>
</div>
<div class="w-full bg-green-100">
<h1 class="text-3xl font-bold">
Main
</h1>
</div>
</div>
</body>
</html>
For some reason, my sidebar's width is not 312px like I want it to be.
What am I missing? Here is a CodeSandbox too.
676
Just add flex-none to prevent div from growing and shrinking. Like that.
<div class="w-[312px] flex-none bg-red-100">
<h1 class="text-3xl font-bold">
Sidebar
</h1>
</div>
answered Feb 01 '26 10:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With