Issue
I am trying to set overflow-scroll on a container that I only want to have a maximum height of 100%. However, when I set a maximum height on the parent container and set overflow-scroll on the child container, the child container continues to grow past the parent container.
Here is a tailwind playground link: https://play.tailwindcss.com/opbmcsxpgV
below is the code from the link:
<div class="min-h-screen bg-slate-900">
<div class="flex max-h-full justify-between p-4 w-full flex-wrap flex-col gap-4 bg-slate-700">
<div class="flex max-h-full flex-wrap grid grid-cols-2 sm:grid-cols-1 gap-4 w-full bg-slate-500">
<div class="bg-slate-300 max-h-full">
<div class="bg-slate-100 max-h-full">
<div class="max-h-full border-2 border-pink-600 pt-4 overflow-scroll">
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
</div>
</div>
</div>
</div>
<div class="h-full flex grid grid-rows-3 sm:grid-rows-1 gap-4">
<!--- More content here that does not matter --->
</div>
</div>
</div>
</div>
What I am trying to accomplish to to set a top level container that is the full height and width of the screen and then have all the child contianers have a max height so they do not grow past the screen hence all the max heights I have scattered around. I think what is happening is that since the top-level container has a minimum height set for the screen, everything will continue to grow if the content goes past the screen no matter if the child containers have a maximum height set to full since the parent can continue to grow. I'm not entirely sure how to fix this though.
I've tried a number of combinations of min / max heights on all of the containers but I just cannot seem to get just the container I need to do the overflow-scroll
Edit: putting max-h-[90vh] on the div that contains all the hello testing divs gave me the result I was looking for but I am not entirely sure how ideal this solution is
Solution
max-height: 100% does nothing with when the parent has resolved height where its calculation depends on its content:
<div class="min-h-screen bg-slate-900">
<div class="flex max-h-full …">
Instead, consider moving the 100vh height constraint:
<div class="bg-slate-900">
<div class="flex max-h-screen …">
With the various flex/grid layouts, ensure the min-height: min-content default is overridden with min-height: 0 on children, so that the child can shrink where necessary.
Avoid applying flex and grid classes on the same element – both apply display value so one class (flex) will always be redundant since it would be overridden by the other.
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<div class="bg-slate-900">
<div class="flex max-h-screen w-full flex-col flex-wrap justify-between gap-4 bg-slate-700 p-4">
<div class="grid min-h-0 w-full grid-cols-2 gap-4 bg-slate-500 sm:grid-cols-1">
<div class="max-h-full min-h-0 bg-slate-300">
<div class="flex max-h-full flex-col bg-slate-100">
<div class="max-h-full overflow-scroll border-2 border-pink-600 pt-4">
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
<div>
<h1>Hello From Testing Land</h1>
</div>
</div>
</div>
</div>
</div>
<div class="grid h-full grid-rows-3 gap-4 sm:grid-rows-1">
<!--- More content here that does not matter --->
</div>
</div>
</div>Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.