Элемент pre/code с горизонтальной полосой прокрутки разбивает гибкий макет на Firefox

Ответ 1

Вам просто нужно установить min-width:0 на свой элемент flex, .c. Подробнее см. Мой ответ на этот похожий вопрос.

Backstory: спецификация flexbox вводит новую функцию калибровки min-width: auto, которая вынуждает элементы гибкости быть как минимум такими же большими поскольку их минимальная ширина содержимого - минимальная ширина, необходимая для их содержимого, чтобы избежать переполнения. Сейчас Firefox является единственным браузером, который реализовал это, поэтому вы видите его только там.

Если вы хотите отключить это поведение, просто укажите элемент flex min-width:0.

(Вы также можете установить overflow:hidden в элементе flex, как описано в другом ответе здесь, но это переполнение. Это принесет пользу только вам, заставив min-width:auto разрешить 0, через специальный случай в 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>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>

Ответ 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>

Ответ 3

Я просто добавил эту строку в свой css и не стал больше горизонтальной прокрутки в Firefox

pre {
    white-space: pre-line;
}