带有水平滚动条的 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

您只需在弹性项目.c 上设置min-width:0。请参阅我的answer on this similar question 了解更多信息。

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

如果你想禁用这个行为，只需给弹性项目min-width:0。

（您也可以在弹性项目上设置overflow:hidden，如此处其他答案中所述，但这太过分了。这只会通过@987654329 中的特殊情况强制min-width:auto 解析为0 来使您受益@定义。缺点是overflow:hidden 也迫使浏览器做额外的工作来管理弹性项目的不可见滚动区域，这在内存和性能方面有非零成本，所以最好避免它，除非你真的在弹性项目上使用 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;
}

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

您需要在这里做的就是将代码块的父元素设置为<pre>，在本例中将<div class="c"> 设置为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;
}

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