html div 上下显示不全,flex布局滚动问题，子元素无法全部显示的解决办法

flex布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了flex布局滚动的一个问题，在此记录一下。

问题重现

理想情况下，当然是下面的状态，网页的高度适中，登录框垂直水平居中。

但是，当调整浏览器的高度时，问题就出现了。

可以看到，当网页的高度比登陆框的高度小时，哪怕滚动条已经在顶部了，也看不到登录框的顶部，如果登陆框的右上角有关闭按钮的话，那么也是看不见的。

问题代码

部分html

登录框

部分css

.mask {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.4);

display: flex;

justify-content: center;

align-items: center;

overflow: auto;

}

.content {

width: 400px;

height: 600px;

background: #fff;

border-radius: 10px;

display: flex;

justify-content: center;

align-items: center;

}

解决方法

html

登录框

html里面，多了一个div，将需要滚动的元素包起来。

css

.mask {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.4);

/* display: flex;

justify-content: center;

align-items: center; */

overflow: auto;

}

.content-wrap {

width: 100%;

min-height: 700px;

display: flex;

justify-content: center;

align-items: center;

}

css里面，将遮罩的flex代码去掉了，给新的div设置了一个最低高度。关键就在于最低高度，如果不用最低高度的话，滚动时还是无法全部显示登录框。

下面是最后的效果。