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

冷不防 2022-01-12 00:19 207阅读 0赞

[代码链接][Link 1] 这在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上关于这个[问题的答案][Link 2] ###

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

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fhuyongyong1992%2Fpen%2FjjMRdy
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F48167041%2Fflex-fill-overflow-ms-edge-issue

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 el-table中show-overflow-tooltip属性未生效

问题描述：使用 el-table 组件中的 show-overflow-tooltip 属性，目的是想让“描述”这一栏信息只展示一行，如果信息过长则在行尾增加省略号并且

末蓝、/ 2024年02月29日 06:31/ 0 赞/ 50 阅读

相关在springboot中 mybats注解sql生效，XML不生效的原因

一般在项目中都会使用springboot，如果需要使用mysql，一般都会使用阿里的druid数据库连接池，那使用这个连接池的时候,一般都会对druid做一些配置，有的人喜欢在

布满荆棘的人生/ 2023年02月27日 08:05/ 0 赞/ 21 阅读

相关 CSS scrollbar滚动条Firefox/Chrome/Edge

CSS scrollbar滚动条Firefox/Chrome/Edge ![20200926121629492.png_pic_center][] 效果如上图支持Fi

绝地灬酷狼/ 2022年12月10日 12:29/ 0 赞/ 170 阅读

相关解决ActionBar中不显示item的问题，item显示在overflow中

解决ActionBar中不显示item的问题，item显示在overflow中一、问题描述使用ActionBar时，需要增加一个菜单选项

﹏ヽ暗。殇╰゛Y/ 2022年09月21日 11:59/ 0 赞/ 297 阅读

相关关于iconfont图标在页面中不生效的问题

问题描述：在做uni-app项目时需要导入iconfont图标，在配置完之后试验了一下，然后在页面中就出现了下面的情况： ![watermark_type_ZHJvaW

小鱼儿/ 2022年09月11日 07:19/ 0 赞/ 282 阅读

相关关于SpringCache 在同一个类中调用方法不生效的问题

如下图所示 ![在这里插入图片描述][70] 在testA()方法中，每次调用getOne()方法，都会打印为\\\\\做了缓存，也就是在同一个类中调用支持缓存的方法

快来打我*/ 2022年05月08日 09:08/ 0 赞/ 257 阅读

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

[代码链接][Link 1] 这在chrome中没问题，但是在firefox和edge中，会出现header高度被压缩，并没有100px <div class="co

冷不防/ 2022年01月12日 00:19/ 0 赞/ 208 阅读

相关 fieldset 元素添加 display: flex不生效的问题

问题最近写项目时候，对 fieldset 元素添加 `display: flex` ，但是没有达到预期中的效果。在网上， stackoverflow 上都提到

客官°小女子只卖身不卖艺/ 2022年01月10日 12:47/ 0 赞/ 594 阅读

相关【关于element-ui的show-overflow-tooltip不生效】

只写 `show-overflow-tooltip` 是无效的，要添加 `<template slot-scope="scope">` ` <span>{ { sco

古城微笑少年丶/ 2021年12月01日 15:14/ 0 赞/ 2691 阅读

相关 .gitignore不生效问题

问题：在使用git进行版本控制的过程中发现，将想被忽略的文件(文件夹)配置到.gitignore文件中后，实际修改了想被忽略的文件，调用git status查看时，仍然

╰半夏微凉°/ 2021年06月22日 15:38/ 0 赞/ 637 阅读