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

在我的基于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>