嵌套flex下overflow失效

嵌套flex下 overflow失效

通常在写页面时会有这样的需求：页面内的局部区域可滚动，即在flex盒子A下嵌套另一个flex盒子B, B的高度是flex:1，让B的子元素高度是flex:1且overflow:auto，但是这种情况下的overflow会失效！

解决办法：解决overflow失效的关键代码是min-height: 0; 示例如下：

效果对比图：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body{padding: 0;margin: 0;box-sizing: border-box;height: 100%;}.container{height: 100%;background-color: #b2b2b2;display: flex;flex-direction: column;}.header{height: 80px;background-color: salmon;}.content{flex: 1;background-color: sandybrown;display: flex;flex-direction: column;/* 解决嵌套flex:1;下overflow失效的关键！ 设置最小高度 */min-height: 0; }.footer{height: 80px;background-color: salmon;}.content-content{flex: 1;background-color: aquamarine;overflow: auto;}</style>
</head><body><div class="container"><div class="header">我是头部</div><div class="content"><h3>我是二级头部</h3><div class="content-content"><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p><p>这是内容。。。</p></div></div><div class="footer">我是脚部</div></div>
</body></html>

嵌套flex下overflow失效相关推荐

ie6、ie7下overflow失效
如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute,那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rela ...
JS Flex交互:html嵌套Flex(swf)
一.html页面嵌套Flex需要用到 swfobject.js swfobject的使用是非常简单的,只需要包含 swfobject.js这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入F ...
解决eWebEditor老版本在IE新版本下按钮失效问题一劳永逸的办法
解决eWebEditor老版本在IE新版本下按钮失效问题一劳永逸的办法参考文章: (1)解决eWebEditor老版本在IE新版本下按钮失效问题一劳永逸的办法 (2)https://www.cnbl ...
得到的概率值_论文推荐|屋面钢梁在超强意外雪荷载作用下的失效概率
作者:石飞宇王孟鸿北京建筑大学土木与交通工程学院摘要对工业建筑屋面支撑吨位较大设备的钢梁,为避免造成支座梁产生较大扭矩,设备梁往往采用简支梁的设计方案,释放支座两端弯矩.按常规设计确定屋面设 ...
mobile safari下 overflow:auto无效的解决方法
mobile safari下 overflow:auto无效的解决方法参考文章: (1)mobile safari下 overflow:auto无效的解决方法 (2)https://www.cnbl ...
thinkpad的trackpoint在webstorm或phpstorm下滚动条失效的解决方案
问题: 作为一名前端工程师,对开发工具是非常挑剔的,最近爱上phpstorm(webstorm),用着确实让人舒服,最大的无奈就是: 我使用的thinkpad的滚动条(小红点的滚动条)在这两款软件下竟 ...
Safari浏览器下colgroup失效导致表格列宽均分
Safari浏览器下colgroup失效导致表格列宽均分表现原因解决表现使用原生tabel标签写表格,由于需要对表头做特殊处理,所以采用两个表格组装的方式写,表头也是用单独的table标签写 ...
flex 与 overflow
设置flex之后,使用overflow: auto; 不能在该固定区域内滚动 <div class="container"><div class="he ...
关于弹性盒flex布局overflow无作用问题
flex弹性盒较为方便,可以节省我们很多布局时间,但是有时候可能会出现一点问题 <div className={styles.main_box}> //布局<div classNam ...

嵌套flex下overflow失效

嵌套flex下 overflow失效

嵌套flex下overflow失效相关推荐

最新文章

热门文章