flex布局

问题:三个 div 在页面竖直 flex 排序，最底部 div 的 flex 设置 1,预期结果:他占据剩余页面,实际:超出页面高度

解决

给她设置具体的 height

原因

flex 布局中，flex 容器的高度是由其内容高度决定的。如果 flex 容器的内容高度超出了容器的高度，那么容器就会出现溢出现象。给这个 div 一个具体的高度可以限制其高度，从而避免溢出现象,

其他解决方式:
设置 min-height:100vh 占满视口高度;overflow:auto 自动滚动条(视情况选择)

参考

Flex 弹性布局从入门到实践

flex:1 之后还要设置一个具体的高度或者宽度