在容器中设置
flex
-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应。
内容高度不固定，无法出现滚动条，然后在容器中添加height：0，出现滚动条，个人猜想为设置height：0后，将默认的
盒子模型
高度设置为空，让flex设置的高度生效
(13条消息) flex自适应高度内容高度超出容器高度自动出现滚动条的问题_weixin_30698297的博客-CSDN博客
最近在项目中遇到一个
问题
就是水平垂直居中我是用的是
flex
布局，然后在缩小屏幕时里边的
内容
高度
超出
了外侧区域的
高度
(这里是屏幕的
高度
，这时候虽然
出现
了
滚动条
，但是展示不完全，被遮住了，经过测验才发现是因为align-items:center;)的原因，也就是居中的原因，解决办法写在下面。
<div class="coupon_window">
<div class="white_dialog">
用
flex
搭建一个如下页面布局
（1）在主
容器
container中创建header、main、footer等
容器
(div)，display:
flex
开启
flex
布局，
设置
主
容器
的大小是很有必要的，
flex
布局将根据
容器
的大小来分配内部子
元素
的大小，所以配置了
height
: 100vh;width: 100%;
（2）通过
flex
-direction: column改变
容器
的排列方向为竖向
（3）主要通过
flex
:1来让
flex
布局
元素
自适应
，当
flex
布局范围内的其他
容器
已经分配了大小时，则
设置
了此属性的
开发过程中很多时候需要一个区域
自动
撑开，并且在刚好撑开的区域内实现滚动，这时用
flex
:1去做。但实际效果很多时候会
出现
区域撑的过大，却没有滚动效果。
要实现4
自动
撑满剩余空间，并且里面的
内容
超出
时滚动。
容器
1
设置
display:
flex
;
flex
-direction:column;
height
:100%;
容器
2
设置
display:
flex
;
flex
-direction:column;
flex
:1;overflow:auto;这里overflow:auto不会有滚动效果，只是阻止
容器
2被撑大，不
设置
