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

你只需要设置min-width:0你的弹性项目,.c.见我对这个类似的问题的答案更多.

背景故事:Flexbox规范引入了一个新的大小调整功能,min-width: auto它可以使弹性项目至少与其最小内容宽度一样大 - 这是其内容所需的最小宽度,以避免溢出.目前,Firefox是唯一实现此功能的浏览器,这就是为什么你只能在那里看到它.

如果要禁用此行为,只需提供flex项min-width:0.

(您也可以设置overflow:hiddenflex项目,如此处的其他答案中所述,但这太过分了.只有min-width:auto通过min-width:auto定义中的特殊情况强制解析为0 才能使您受益.缺点是overflow:hidden 也会强制浏览器做额外的工作来管理弹性项目的隐形可滚动区域,并且在内存和性能方面有非零成本,所以除非你真的在flex项目上使用 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>