Julien
Reputation: 13
Tailwind: div is expanding when it has to many children
I'm new to Tailwind and I don't know why my div is expanding when it should just get the remaining width from the row. If I put too many children inside the div, the whole page expands.
<!doctype html>
<html class="w-full h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="w-full h-full">
<div class=" max-w-full w-full h-full">
<div class="w-full h-full flex flex-row">
<div class="w-[250px] bg-slate-200 flex-none"></div>
<div class=" bg-green-100 flex-1 flex flex-col ">
<div class="h-[100px] bg-white flex-none flex flex-row">
<div class="bg-black p-1 w-[100px] text-white rounded m-1 flex-none">
Button
</div>
<div class="bg-yellow-400 flex-1 m-1 ">
<div class="w-full overflow-x-auto flex flex-row max-w-min h-full">
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
</div>
</div>
</div>
<div class="bg-green-700 flex-1"></div>
</div>
</div>
</div>
</body>
</html>I want the page to look like this: Result I want to achieve
The upper right part of the page should only add a scroll bar if too many items have been added, instead of expanding the page.
Thank you for your help!
Upvotes: 1
Views: 993
Answers (1)
Temani Afif
Reputation: 273797
I have added min-w-0 and overflow-auto to your code to fix the issue.
<!doctype html>
<html class="w-full h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="w-full h-full">
<div class=" max-w-full w-full h-full">
<div class="w-full h-full flex flex-row">
<div class="w-[250px] bg-slate-200 flex-none"></div>
<div class=" bg-green-100 flex-1 flex flex-col min-w-0"> <!-- HERE -->
<div class="h-[100px] bg-white flex-none flex flex-row overflow-auto"> <!-- AND HERE -->
<div class="bg-black p-1 w-[100px] text-white rounded m-1 flex-none">
Button
</div>
<div class="bg-yellow-400 flex-1 m-1 ">
<div class="w-full overflow-x-auto flex flex-row max-w-min h-full">
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
<div class="min-w-[100px] mr-1 rounded bg-blue-600 ">
item
</div>
</div>
</div>
</div>
<div class="bg-green-700 flex-1"></div>
</div>
</div>
</div>
</body>
</html>Upvotes: 1
Related Questions
- Problem with overflow in TailwindCSS layout
- Applying style on children does not work in Tailwind
- How to prevent width of child element resize when scroll bar visible?
- prevent child div to overflow parent div css/tailwindcss
- How to stop a child div expanding to fit the width of its parent in Flexbox with Tailwind
- TailwindCSS custom dropdown expanding parent
- Tailwind: can't get the elements to fill the width
- Grid elements grow at the same time in Tailwind CSS
- Tailwind CSS horizontal overflow wrapping
- Expand div width with content