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

Question

在我的基于flexbox的布局中，我可能有一个<pre><code></code></pre>元素（以及其他元素）。由于其内容可能比容器更宽，因此我将其设为overflow-x:auto。

它在Chrome上完美运行：

但它在Firefox上被打破了：

如果没有硬编码尺寸，我该如何解决？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需在弹性项目min-width:0上设置.c即可。有关详情，请参阅我的answer on this similar question。

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

如果要禁用此行为，只需提供弹性项min-width:0。

（你也可以在flex项目上设置overflow:hidden，如此处的其他答案中所述，但这样做太过分了。只有通过强制min-width:auto解析为0才能让你受益匪浅，通过min-width:auto定义中的特殊情况。缺点是overflow:hidden 还强制浏览器做额外的工作来管理Flex项目的隐形可滚动区域，并且＆ ＃39;内存和性能方面的成本非零，所以除非你实际上在上使用 overflow:hidden，否则最好避免使用它。而且你不是，所以最好避免它。）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在此处执行此操作，设置代码块<pre>的父元素，在本例中为<div class="c">至overflow: hidden

.c {
  background: #971;
  flex: 1;
  overflow: hidden;
}

.c是一个块元素，它占用了它在这里获得的所有空间，而不允许使用此规则集溢出。

pre因为孩子因其内容而占用更多空间，因此孩子会溢出其父级，因此overflow: auto将设置为滚动此处，导致滚动区域出现在内部{{} 1}} - 元素。

示范：

＆＃13;

＆＃13;

pre

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我刚在我的css中添加了这一行，而在Firefox中没有更多的水平滚动

pre {
    white-space: pre-line;
}