flex 与 overflow

设置flex之后，使用overflow: auto; 不能在该固定区域内滚动

 <div class="container"><div class="header"></div><div class="sub-container"><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div><div class="content">1</div></div><div class="footer"></div></div>

.container{width: 200px;height: 100vh;background-color: yellow;display: flex;flex-direction: column;}.header{height: 50px;background-color: gray;}.footer{height: 60px;background-color: gray;}.sub-container{height: 0;flex: 1;overflow: auto;background-color: pink;}.content{height: 40px;}

重点：可以添加height为0 或者 width为0

.sub-container{flex: 1;overflow: auto;width: 0; //横向需要滚动条的话height: 0; //纵向需要滚动条的话
}

flex 与 overflow相关推荐

关于弹性盒flex布局overflow无作用问题
flex弹性盒较为方便,可以节省我们很多布局时间,但是有时候可能会出现一点问题 <div className={styles.main_box}> //布局<div classNam ...
嵌套flex下overflow失效
嵌套flex下 overflow失效通常在写页面时会有这样的需求:页面内的局部区域可滚动,即在flex盒子A下嵌套另一个flex盒子B, B的高度是flex:1,让B的子元素高度是flex:1且ov ...
flex +overflow在firefox与edge中不生效的问题
代码链接这在chrome中没问题,但是在firefox和edge中,会出现header高度被压缩,并没有100px <div class="container">&l ...
flex 嵌套之高度自适应
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>fle ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题
关于display:flex碰上white-space nowrap 影响布局的问题缘由:想用flex实现,右边固定,左边文字自适应,并自动换行. 问题:文字撑满不换行布局效果如下图: 代码如下: ...
在Vue中使用flex布局 echarts多图标不能自适应缩放问题
前言:最近有个项目需要用到echarts绘制多个图表,需求是要支持大屏展示,还有需要支持不同比例的缩放和任意手动缩放.因此,深入学习了echarts和flex布局.虽然遇到很多问题,但都一一解决了收获 ...
overflow: hidden的用法
overflow: hidden常用于父元素上.当子元素的内容超过了父元素的大小时,子元素的内容会被修剪.最基本的用法就是溢出隐藏. overflow属性的基本用法 overflow 属性规定当内容溢 ...
flex布局均分高度了，没有自适应内容高度，怎么回事
前言 flex布局中,通常我们都希望子元素的高度是自适应.自动被内容撑开,我们的做法基本是直接display:flex,不需要额外再去设置其他属性就会得到下面的效果.但是最近使用uniapp模拟产品分 ...

flex 与 overflow

设置flex之后，使用overflow: auto; 不能在该固定区域内滚动

flex 与 overflow相关推荐

最新文章

热门文章