html – 具有水平滚动条的precode元素打破了Firefox上的flex布局

概述在我的基于Flexbox的布局中,我可能有< pre>< code>< / code>< / pre>元素(以及其他元素).由于其内容可能比容器宽,因此我将其设置为overflow-x：auto. 它完美地在Chrome上运行： 但是在Firefox上它是坏的： 如何在没有硬编码尺寸的情况下解决这个问题？ div,pre { padding: 5px; color: white;}.m 在我的基于FlexBox的布局中,我可能有< pre>< code>< / code>< / pre>元素(以及其他元素).由于其内容可能比容器宽,因此我将其设置为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;}

<div class=m>    <div class=l>this must be 100px wIDe</div>    <div class=c>this must take the remaining space</div>    <div class=r>this must be 100px wIDe</div>  </div>  <div class=m>    <div class=l>this must be 100px wIDe</div>    <div class=c>      <pre><code>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)</code></pre>    Some other content in the c column.</div>    <div class=r>this must be 100px wIDe</div>  </div>

解决方法 您只需要在d性项目.c上设置最小宽度：0.查看我的 answer on this similar question了解更多.

Backstory：flexBox规范引入了一个新的大小调整功能min-width: auto,它强制Flex项目至少与最小内容宽度一样大 – 它们的内容所需的最小宽度,以避免溢出.现在,firefox是唯一实现这一目标的浏览器,这就是为什么你只看到它.

如果要禁用此行为,只需给flex项目min-wIDth：0.

(你也可以设置溢出：隐藏在flex项目上,如另一个答案在这里,但这是超额的,只有通过强制最小宽度：自动解析为0,通过最小宽度的特殊情况,：自动定义,缺点是溢出：hIDden还强制浏览器进行额外的工作来管理flex项目的不可见的可滚动区域,而且在内存和性能方面有非零的成本,所以更好地避免它,除非你实际上正在使用overflow：隐藏在flex项目上,而你不是,所以最好避免它.)

div,.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;}

<div class=m>    <div class=l>this must be 100px wIDe</div>    <div class=c>this must take the remaining space</div>    <div class=r>this must be 100px wIDe</div>  </div>  <div class=m>    <div class=l>this must be 100px wIDe</div>    <div class=c>      <pre><code>The following line of code is long:      This is the long line of code the prevIoUs line of code was referring to (no,sorry for the inconvenIEnce)</code></pre>    Some other content in the c column.</div>    <div class=r>this must be 100px wIDe</div>  </div>

总结

以上是内存溢出为你收集整理的html – 具有水平滚动条的pre / code元素打破了Firefox上的flex布局全部内容，希望文章能够帮你解决html – 具有水平滚动条的pre / code元素打破了Firefox上的flex布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。