首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

带有水平滚动条的pre/code元素打破了Firefox上的flex布局

作者：大开先生_615 | 来源：互联网 | 2023-05-19 10:39
如何解决《带有水平滚动条的pre/code元素打破了Firefox上的flex布局》经验，为你挑选了2个好方法。

在我的基于flexbox的布局中,我可能有一个

元素(以及其他元素).因为它的内容可能比容器更宽,所以我做到了overflow-x:auto.

它在Chrome上完美运行:

在此输入图像描述

但它在Firefox上被破坏了:

在此输入图像描述

如何在没有硬编码尺寸的情况下解决这个问题？

div,pre {
  padding: 5px;
  color: white;
}
.m {
  background: #222;
  display: flex;
}
.l, .r {
  background: #143;
  flex: 0 0 100px;
}
.c {
  background: #971;
  flex: 1;
}
pre {
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
 

    
this must be 100px wide

    
this must take the remaining space

    
this must be 100px wide

  

  

    
this must be 100px wide

    

      
The following line of code is long:
      This is the long line of code the previous line of code was referring to (no, it can't be 72 col, sorry for the inconvenience)

    Some other content in the c column.

    
this must be 100px wide



1> dholbert..：

你只需要设置min-width:0你的弹性项目,.c.见我对这个类似的问题的答案更多.

背景故事:Flexbox规范引入了一个新的大小调整功能,min-width: auto它可以使弹性项目至少与其最小内容宽度一样大 - 这是其内容所需的最小宽度,以避免溢出.目前,Firefox是唯一实现此功能的浏览器,这就是为什么你只能在那里看到它.

如果要禁用此行为,只需提供flex项min-width:0.

(您也可以设置overflow:hiddenflex项目,如此处的其他答案中所述,但这太过分了.只有min-width:auto通过min-width:auto定义中的特殊情况强制解析为0 才能使您受益.缺点是overflow:hidden 也会强制浏览器做额外的工作来管理弹性项目的隐形可滚动区域,并且在内存和性能方面有非零成本,所以除非你真的在flex项目上使用 overflow:hidden,否则最好避免它.你不是,所以它是最好避免它.)

div,pre {
  padding: 5px;
  color: white;
}
.m {
  background: #222;
  display: flex;
}
.l, .r {
  background: #143;
  flex: 0 0 100px;
}
.c {
  background: #971;
  flex: 1;
  min-width: 0;
}
pre {
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
 

    
this must be 100px wide

    
this must take the remaining space

    
this must be 100px wide

  

  

    
this must be 100px wide

    

      
The following line of code is long:
      This is the long line of code the previous line of code was referring to (no, it can't be 72 col, sorry for the inconvenience)

    Some other content in the c column.

    
this must be 100px wide


2> GNi33..：

你需要做的就是设置代码块的父元素

,在本例中
为overflow: hidden 



.c {
  background: #971;
  flex: 1;
  overflow: hidden;
}




.c 是一个块元素,它占用了它在这里获得的所有空间,而不允许使用此规则集溢出. 



pre由于孩子因其内容而占用更多空间,因此孩子会溢出其父级,因此overflow: auto将设置为滚动此处,从而导致滚动区域出现在内部pre元素上.



示范:







div,pre {
  padding: 5px;
  color: white;
}
.m {
  background: #222;
  display: flex;
}
.l, .r {
  background: #143;
  flex: 0 0 100px;
}
.c {
  background: #971;
  flex: 1;
  overflow: hidden;
}
pre {
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}


 

    
this must be 100px wide

    
this must take the remaining space

    
this must be 100px wide

  

  

    
this must be 100px wide

    

      
The following line of code is long:
      This is the long line of code the previous line of code was referring to (no, it can't be 72 col, sorry for the inconvenience)

    Some other content in the c column.

    
this must be 100px wide

  

        

        
        
    



    

        
    




    

    

        
推荐阅读
author-avatar
大开先生_615
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有