问题:三个 div 在页面竖直 flex 排序,最底部 div 的 flex 设置 1,预期结果:他占据剩余页面,实际:超出页面高度
解决
给她设置具体的 height
原因
flex 布局中,flex 容器的高度是由其内容高度决定的。如果 flex 容器的内容高度超出了容器的高度,那么容器就会出现溢出现象。给这个 div 一个具体的高度可以限制其高度,从而避免溢出现象,
其他解决方式:
设置 min-height:100vh 占满视口高度;overflow:auto 自动滚动条(视情况选择)
参考
Flex 弹性布局从入门到实践
flex:1 之后还要设置一个具体的高度或者宽度