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

Question

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

Answer 1

您只需要在您的 flex 元素 .c 上设置 min-width:0。看我的answer on this similar question了解更多。

背景故事:flexbox 规范引入了一个新的大小调整功能，min-width: auto ，这会强制 flex 元素至少与其最小内容宽度一样大——这是它们的内容需要的最小宽度，以避免溢出。目前，Firefox 是唯一实现此功能的浏览器，这就是为什么您只能在那里看到它的原因。

如果你想禁用此行为，只需给 flex 元素 min-width:0。

(您也可以在 flex 元素上设置 overflow:hidden，如此处其他答案中所述，但这太过分了。这只会通过强制 min-width:auto 通过 min-width:auto 定义中的特殊情况解析为 0。缺点是 overflow:hidden 也是强制浏览器做额外的工作来管理 flex 元素的一个不可见的可滚动区域，这在内存和性能方面有非零成本，所以最好避免它，除非你实际上是使用 overflow:hidden 在 flex 元素上。而你不是，所以最好避免它。)

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;
}

 <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>