title: pre/code element with horizontal scrollbar breaks the flex layout on Firefox
body: <p>In my flexbox based layout, I may have a <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code> element (among other elements). As its content might be wider than the container, I made it <code>overflow-x:auto</code>.</p>
  
  <p>It works perfectly on Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/oOgmc.png" alt="enter image description here"></p>
  
  <p>But it's broken on Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/7BinE.png" alt="enter image description here"></p>
  
  <p>How can I fix that without hard-coded dimensions ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class=m&gt;
      &lt;div class=l&gt;this must be 100px wide&lt;/div&gt;
      &lt;div class=c&gt;this must take the remaining space&lt;/div&gt;
      &lt;div class=r&gt;this must be 100px wide&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=m&gt;
      &lt;div class=l&gt;this must be 100px wide&lt;/div&gt;
      &lt;div class=c&gt;
        &lt;pre&gt;&lt;code&gt;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)&lt;/code&gt;&lt;/pre&gt;
      Some other content in the c column.&lt;/div&gt;
      &lt;div class=r&gt;this must be 100px wide&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>