flex子项内容超出flex容器范围，flex子项顶部内容被遮住

时间 2019-12-06

标签 flex 子项内容超出容器范围顶部遮住栏目 Flex 繁體版

原文原文链接

flex子项内容超出flex容器范围，flex子项顶部内容被遮住

咱们常常用flex布局方式来实现垂直居中对齐，可是当内容高度是动态变化且超出了flex容器的高度时，没法滚动到顶部，致使顶部的内容没法访问。

以往的弹窗效果都是用插件来实现，此次一个简单的页面不想引入那么多插件，本身动手丰衣足食。css

弹窗要求：html

上下左右居中对齐；
须要考虑到内容超过一屏或者不够一屏的伸缩性；

这些都是简单货，代码以下： jsFiddle效果布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-pop</title>
    <style>
        *{ margin: 0; border: 0; padding: 0;}
        html,body{ height: 100%;}
        .popWrap{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 20px 0; background: rgba(0,0,0,.8);
            display: flex; justify-content: center; align-items: center; box-sizing: border-box; overflow: auto;}
        .popContainer{ width: 80%; border-radius: 5px; background: #fff; padding: 20px; color: #555; line-height: 1.5; }
        .btnBlock{ display: block; margin-top: 20px; width: 100%; height: 40px; line-height: 40px; color: #fff;
            font-size: 14px; background: #007ACC; border-radius: 5px; }
    </style>
</head>
<body>
    <div class="popWrap">
        <div class="popContainer">
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <button class="btnBlock">肯定</button>
        </div>
    </div>
</body>
</html>

缺陷：flex

内容已经超过了一屏，很明显最上面的内容是03，并非实际最顶部的内容；
若是把内容删掉一些，会发现是位置是居中的，效果正常。
问题是在内容超出一屏的时候就没法看到最顶部的内容。ui

解决方法：spa

给flex子项设置margin:auto;，也就是.net

.popContainer{ margin: auto; }

弹窗居中对齐效果插件

博客地址code