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

问题描述

在我的基于flexbox的布局中，我可能有一个< pre>< code>< / code>< / pre> 。因为它的内容可能比容器更宽，我让它 overflow-x：auto 。

在Chrome上：

p>

但它在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>这必须是100像素宽< / div> < div class = c>这必须占用剩余空间< / div> < div class = r>这必须是100像素宽< / div> < / div> < div class = m> < div class = l>这必须是100像素宽< / div> < div class = c> < pre>< code>下面的代码行是long：这是上一行代码引用的长代码行（不，它不能是72 col，对不方便感到遗憾） code>< / pre> c列中的其他内容。< / div> < div class = r>这必须是100像素宽< / div> < / div>  

解决方案

p>您只需要在您的flex项目 .c 上设置 min-width：0 。有关详情，请参阅我的。

Backstory：flexbox规范引入了一个新的大小调整功能，，这会强制flex项目至少大小到最小内容宽度 - 它们的内容需要的最小宽度，以避免溢出。现在，Firefox是唯一实现这一点的浏览器，这就是为什么你只看到它。

如果你想禁用这个行为， min-width：0 。

（您也可以设置 overflow： code>在flex项目，如另一个答案在这里描述，但是这是overkill。只有通过强制 min-width：auto ，通过 min-width：auto 定义中的一个特殊情况，缺点是 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>这必须是100像素宽< / div> < div class = c>这必须占用剩余空间< / div> < div class = r>这必须是100像素宽< / div> < / div> < div class = m> < div class = l>这必须是100像素宽< / div> < div class = c& < pre>< code>下面的代码行是long：这是上一行代码引用的长代码行（不，它不能是72 col，对不方便感到遗憾） code>< / pre> c列中的其他内容。< / div> < div class = r>这必须是100像素宽< / div> < / div>  

In my flexbox based layout, I may have a <pre><code></code></pre> element (among other elements). As its content might be wider than the container, I made it overflow-x:auto.

It works perfectly on Chrome:

But it's broken on Firefox:

How can I fix that without hard-coded dimensions ?

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>

解决方案

You just need to set min-width:0 on your flex item, .c. See my answer on this similar question for more.

Backstory: The flexbox spec introduces a new sizing feature, min-width: auto, which forces flex items to be at least as large as their min-content width -- the minimum width that their contents need, to avoid overflow. Right now, Firefox is the only browser to have implemented this, which is why you only see it there.

If you want to disable this behavior, just give the flex item min-width:0.

(You could also set overflow:hidden on the flex item, as described in the other answer here, but that's overkill. That only benefits you by forcing min-width:auto to resolve to 0, via a special case in the min-width:auto definition. The downside is that overflow:hidden also forces the browser to do extra work to manage an invisible scrollable area for the flex item, and that's got a nonzero cost in terms of memory & performance, so better to avoid it unless you actually are using overflow:hidden on the flex item. And you aren't, so it's better to avoid it.)

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>

这篇关于pre / code元素与水平滚动条打破了Firefox上的flex布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！