Issue
I'm on this weird issue for some time already and I was hoping I could find an answer here, but my situation seems different then other posted issues so I figured it was the right thing to ask for help.
My body-element is a flex-container with a direction of column. Inside are 3 elements: a header, a main and a footer. I gave the main element the class flex-1, so it can grow to the bottom of the page.
Inside the main element, I want the child to have a height of 100% (which is h-full in tailwind). I believe the problem is the main element having the class flex-1, and its child not being aware of the height? In the inspector I'm seeing the correct dimensions of the main element, but the inner child (the container, and it's children) will just not grow to height 100%.
<body class="flex flex-col min-h-screen">
<header class="bg-red-400">head</header>
<main class="flex-1 bg-red-300">
main
// the block below will not grow to height 100%
// i tried giving all elements h-full, also items-stretch
<div class="container mx-auto bg-blue-200 flex justify-end">
<div class="bg-blue-200 flex-1">left element</div>
<div class="bg-blue-300 flex-1">right element</div>
</div>
</main>
<footer class="bg-red-200">foot</footer>
</body>
I tried giving all child elements and the parents the class h-full but in the inspector it doesnt show any difference. I also tried to give the class items-stretch and self-stretch to the childs, to no avail.
I also tried the 'ancient way' of giving the body-element a min-height of 100% and the html-element a height of 100%, but the problem persists.
Solution
You'd want to apply height instead of min-height to the <body> element. This will then give a height that is deterministic in the sense that the height does not depend on content. This deterministic characteristic is needed for any child height: 100% to work:
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<body class="flex flex-col h-screen">
<header class="bg-red-400">head</header>
<main class="flex-1 bg-red-300">
main
<div class="container mx-auto bg-blue-200 flex justify-end h-full">
<div class="bg-blue-200 flex-1">left element</div>
<div class="bg-blue-300 flex-1">right element</div>
</div>
</main>
<footer class="bg-red-200">foot</footer>
</body>Alternatively, you can have the <main> element also be a vertical flex layout, and grow the .container element into any extra space:
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<body class="flex flex-col min-h-screen">
<header class="bg-red-400">head</header>
<main class="flex-1 bg-red-300 flex flex-col">
main
<div class="container mx-auto bg-blue-200 flex justify-end grow">
<div class="bg-blue-200 flex-1">left element</div>
<div class="bg-blue-300 flex-1">right element</div>
</div>
</main>
<footer class="bg-red-200">foot</footer>
</body>Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.