В моем макете 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>