如何解决flex:1撑开父元素问题
开发过程中很多时候需要一个区域自动撑开,并且在刚好撑开的区域内实现滚动,这时用flex:1去做。但实际效果很多时候会出现区域撑的过大,却没有滚动效果。要实现4自动撑满剩余空间,并且里面的内容超出时滚动。容器1设置 display:flex;flex-direction:column;height:100%;容器2设置 display:flex;flex-direction:column;flex:
·
开发过程中很多时候需要一个区域自动撑开,并且在刚好撑开的区域内实现滚动,这时用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的溢出滚动。
更多推荐
已为社区贡献1条内容
所有评论(0)