flex +overflow在firefox与edge中不生效的问题

代码链接这在chrome中没问题，但是在firefox和edge中，会出现header高度被压缩，并没有100px

<div class="container"><header>头部</header><footer><div class="left">left</div><div class="right">尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />  尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br /><br />尾部<br />尾部<br />尾部<br />尾部<br /></div></footer>
</div>
复制代码

css:

.container{display:flex;flex-direction: column;height: 400px;
}
header{width: 100%;height: 100px;background:#f0f;
}
footer{display: flex;flex: 1;background: #0f0;
/* 这行代码是关键   */
/*   min-height: 0 */
}
.left{width:200px;border: 1px solid #f00;
}
.right{flex: 1;overflow: auto;
}
复制代码

firefox和edge以及部分chrome下：

最新chrome下ok:

解决方法：

给header设置一个min-height:60px

详见stackoverflow上关于这个问题的答案

转载于:https://juejin.im/post/5d09eeccf265da1b855c5a5d

flex +overflow在firefox与edge中不生效的问题相关推荐

Chrome、FireFox、Edge等最新版浏览器中继续使用Flash Player方案
一.背景最近大连车务段在其公众号发表了题为<全力攻关一昼夜,确保运输三十站>的文章,迅速在网络上引发了群嘲,面对舆论压力只好自行删除了此文.起因是其现在车子系统在浏览器中运行的网页代码依 ...
flex与grid响应式布局中的子容器为固定空间后的剩余空间，该元素容器不出现滚动条或者滚动条异常问题
flex与grid响应式布局中的子容器滚动条问题最近在用grid布局写一些简单的响应式页面页面,遇到一个问题,就是我们的全局用grid布局或者flex布局中,遇到某个子元素的宽度或者高度是页面剩下的 ...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
IE6.0、IE7.0 、FireFox 在样式中的不同写法.doc
IE6.0.IE7.0 .FireFox 在样式中的不同写法 2009年3月26日 15:44:27 发布:hugo 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然 ...
edge无法上网dns_如何在Microsoft Edge中通过HTTPS启用DNS
edge无法上网dns Microsoft will one day enable DNS over HTTPS (DoH) for all Windows applications, but you ...
Chrome让人失望，是时候转到Firefox或Edge？
我们曾报道过谷歌正在移除 Chrome 的关闭其他选项卡,这引起很多用户的讨论,很多用户表现出对 Chrome 浏览器的失望.而在国外,也有很多人认为谷歌这项修改使 Chrome 变得越来越臃肿. 还 ...
使用displsy:flex + overflow:hidden时子元素被压缩
博客地址以下结构就很可能会发生子元素被压缩: ul {display: flex;overflow: hidden;li {display: flex;}} 效果: 此时我的目的是做一个轮播图,想让 ...
在Chrome、Firefox等浏览器中实现低延迟播放海康、大华RTSP
现在到处是摄像头的时代,随着网络带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防行业. ...
如何在Microsoft Edge中更改主页
By default, Microsoft Edge opens with a custom "New Tab" page full of content. Luckily, it ...

flex +overflow在firefox与edge中不生效的问题

解决方法：

详见stackoverflow上关于这个问题的答案

flex +overflow在firefox与edge中不生效的问题相关推荐

最新文章

热门文章