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

下面是最后的效果。