Overflowing issues ( Height related )
Hey there! I am having this issue where my content inside the div is overflowing, I am totally unsure and clueless why is this happening.
Here this is the screen recording of actual site, and what is happening, I have this
div inside of main tag, and dummy text to illustrate whats happening, blue background is to show the real overflowing problem, Thanks15 Replies
This is the code,
p tag contains the dummy text
you're setting height to 100%, which will take 100% of the parent, which is 100% of the viewport, so it can't grow to accomodate the content
if you set min-height: 100% instead, the div will grow with the content
In root
body tag I have set the background color and h-dvh w-dvwshare a live example them, codepen or tailwind playground
it's probably still the h-full though
This is the root html
%sveltekit.body% contains the children layouts which is the above codeyes, and h-dvh will set the height to the size of the viewport, which the other elements will then follow if you give all the children height: 100%
change h-full to min-h-full on the div
Thanks! but my issue was solved only when I changed the h-full to min-h-full on main tag and not on div tag
Why this happened though?
You told the div to be the size of the viewport, so that's what it did
Ahh okay!
was this whole thing due dynamic vh property only?
Not necessarily the dynamic part. You set the body to be the size of the viewport and that gets inherited by every child and used as a reference for the 100% heights on those.
Oh Okay, this helps
And last question 😅
Why Am I getting horizontal scrollbar ?
at a guess, you're setting a lot of widths. the body has a default padding
body, main, and div already take up all available space, so you don't need w-full / w-dvw on anything I've seen here
Okay, thanks! you helped a lot
glad to help 🙂