flex子项内容超出flex容器范围，flex子项顶部内容被遮住
我们经常用flex布局方式来实现垂直居中对齐，但是当内容高度是动态变化且超出了flex容器的高度时，无法滚动到顶部，导致顶部的内容无法访问。
以往的弹窗效果都是用插件来实现，这次一个简单的页面不想引入那么多插件，自己动手丰衣足食。
弹窗要求：
- 上下左右居中对齐；
- 需要考虑到内容超过一屏或者不够一屏的伸缩性；
这些都是简单货，代码如下： 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>
缺陷：
内容已经超过了一屏，很明显最上面的内容是03，并不是实际最顶部的内容；
如果把内容删掉一些，会发现是位置是居中的，效果正常。
问题是在内容超出一屏的时候就无法看到最顶部的内容。
解决方法：
给flex子项设置margin:auto;，也就是
.popContainer{ margin: auto; }
已为社区贡献276条内容
所有评论(0)