How align a block vertically with flex in css so that it will be responsive

Asked Jun 22 '18 at 08:16

Active Jun 22 '18 at 08:32

Viewed 37 times

I am new to flexbox and now I am trying to align items both vertically and horizontally. I started to google and found quite enough answers. All of them are based on the same strategy: to add some css rules to parent block:

display: flex;
align-items: center;
justify-content: center;

But I also want so that parent block was 100% height of window. So I made 100% of html, body and parent block. From the first sight everything works. But then I noticed a problem. When I shrink a browser so that child block does not fit browser window, top part of child centerd block is not visible.

Here is an example. When you open it you see red top border. But if you decrease size of the area for displaying so that the square does not fit that area you do not see a top border. It is lost.

I saw this answer but the problem also exists in the first accepted answer. What should I do to resolve this?

Update

Here is what I get:

edited Jun 22 '18 at 08:25

asked Jun 22 '18 at 08:16

FreeLightman

2,224
2
27
42

Remove 100% height from CSS html {} – Roland Ruul Jun 22 '18 at 08:20
@Roland Ruul did you try it in codepen? If I do this a child block will not be vertically centered. – FreeLightman Jun 22 '18 at 08:22
The red border stayed visible in my browser when scaling the window size. Does it disappear when you scale the window? – billy.farroll Jun 22 '18 at 08:22
@billy.farroll Strange. I added a screenshot of what I a have. – FreeLightman Jun 22 '18 at 08:25

How align a block vertically with flex in css so that it will be responsive

0 Answers0