[英]Can you make a fluid-width header that doesn't wrap with a fixed-width right sidebar?
[英]Fixed width sidebar isn't the right size in Tailwind CSS
我有这个简单的 HTML 并且我正在使用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>
出于某种原因,我的侧边栏宽度不是我想要的 312px。
我错过了什么? 这也是一个CodeSandbox 。
只需添加flex-none
即可防止div
增长和收缩。 像那样。
<div class="w-[312px] flex-none bg-red-100">
<h1 class="text-3xl font-bold">
Sidebar
</h1>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.