flex布局滚动问题，子元素无法全部显示的解决办法

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

问题重现

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

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

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

问题代码

部分html

 <div class="mask">
    <div class="content">
        <h2>登录框</h2>
    </div>
 </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 {
    width: 400px;
    height: 600px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

解决方法

html

 <div class="mask">
    <div class="content-wrap">
        <div class="content">
            <h2>登录框</h2>
        </div>
    </div>
</div>

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设置了一个最低高度。关键就在于最低高度，如果不用最低高度的话，滚动时还是无法全部显示登录框。

下面是最后的效果。