相关疑难解决方法(0)

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css firefox css3 flexbox

Den*_*ret

2015 03-07

10
推荐指数

2
解决办法

1438
查看次数