Content is too tall compared to its parent and overflows
Hi everyone!
I have no idea how to solve this. If I make the viewport bigger, <main> tag which is the main container here becomes bigger too, and overflow stops as after a certain point <main> grows bigger then it's content (like it should) and content starts to grow accordingly (second picture is what happens when height is bigger).
It only happens after the screen becomes wider then 800px, which is my breakpoint for media query.
Here's my layout and my SCSS file:
5 Replies
Could you get this into a codepen with a placeholder background image maybe? It's hard to know for sure, and might be pretty easy to figure out by using our dev tools
I think you might be a bit too reliant on
height: 100%
though. It's a pain to work with, and generally, can be avoided these days, specially since you're already using flex and grid.
There is more going on here too, that you didn't include, which makes it hard, because I don't know if it's the container itself causing the issue, but by the looks of it, it's the content inside of that which is overflowingHi Kevin! Thanks for replying.
I tried getting rid of
height
on .bg
and .container
all together, but it didn't do anything, sadly.
I believe removing margins and paddings in desktop version kinda solves the issue, but I have other parts of the form which has more content and it would still overflow. I think it should shrink according to main
's size then? But I don't know it that's a good practice.
Here's my Codepen with entire HTML and CSS: https://codepen.io/dunder__alexander/pen/vYvrjeQ
I wasn't sure if I could use SCSS there, so I just built my project with npm
and threw the styles in there. The problem there behaves exactly like it does in dev mode and I think CSS is concise enough to understand what's going on.
The project looks unfinished because I'm still not done with it 😅 I've only built styles for mobile so far and I'm struggling with desktop versionIn the future, in CodePen, in the CSS pane there is a the cog wheel thingy, if you click that, you can turn on SCSS 🙂
As for the problem here, it's all around the height having to match the viewport, and there not being enough room, so things are overflowing. I didn't see the issue at first, until I made my viewport less tall.
If you remove:
You can replace it with this (inside the media query):
I think it more or less does the trick.
In general, with CSS, it's hard to make a container a certain size and get the content inside to fit in perfectly. It's much easier to set a
max-width
or something, and let things adjust as they need to.Thanks, Kevin! It did the trick!
I just realized that this is probably what I need to do - maybe container should always remain the same size..? You see, content within
main
can change, and in design sheets that I have it container is always the same size, no matter what's inside.
With your help, nothing overflows now, but I'm currently facing a different issue with content inside main
changing as I go through form steps and the container is constantly changing size due do difference in content.This is one of examples. The first
main
is 524.25px tall, the second one is 542.65px