So I’ve run in to a weird problem I don’t understand and I was wondering if someone might be able to provide a little insight, ok so here is the situation.
I have an overflow container that is set to be 100vh, inside the overflow container I have a content container which is taller then the screen size, the problems start when I try to horizontally and vertically centre the content container inside the overflow container by setting
Code: Select all
display: flex;
align-items: center;
justify-content: center;
While the horizontal centring is fine since the content container is narrower then the overflow container, the top of the content container gets clipped and becomes inaccessible
Here is a screen shot to demonstrate the problem
https://i.postimg.cc/sXykPMxB/untitled1.png
As you can see the top of the box gets clipped and becomes inaccessible.
now after a bit of searching I came across a post that suggested setting margin:auto; on the content container while this stops the content being clipped it doesn’t fully solve the problem because when the content container is taller then the overflow container there is no spacing between the top and bottom of the content box and the overflow container.
https://i.postimg.cc/k43bTmPR/untitled2.png
As you can see in this screen shot adding margin:auto; stopped the clipping problem but left me with a new problem the top of the content box is right up against the edge of the overflow container when there should be a bit of spacing
So my question is how I add a little spacing to the top and bottom of the content container such that when the content container is taller then the overflow container there will still be a bit of space
Here is a screen shot of the sort of effect I’m trying to achieve.
https://i.postimg.cc/SRYHkCtv/untitled3.png