在我的基于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>
解决方法
您只需要在弹性项目.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>
