开发过程中很多时候需要一个区域自动撑开,并且在刚好撑开的区域内实现滚动,这时用flex:1去做。但实际效果很多时候会出现区域撑的过大,却没有滚动效果。在这里插入图片描述
要实现4自动撑满剩余空间,并且里面的内容超出时滚动。
容器1设置 display:flex;flex-direction:column;height:100%;
容器2设置 display:flex;flex-direction:column;flex:1;height:0;height:0只是阻止容器2被撑大,不设置容器2的高度会溢出。
容器3设置 flex:1;overfow:auto;继续阻止容器被撑开,并实现4的溢出滚动。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐