Блок overflow auto внутри flex перестаёт расширяться в firefox, скролл перекрывает контент

Question

Иногда при вёрстке блоков с overflow: auto в firefox блок становится не жадным по ширине и при появлении вертикальной полосы прокрутки создаётся горизонтальная, так как вертикальная отбирает место. В хроме такой проблемы нет.

Временно использую js и вставляю margin-right с вычисленным размером скролла (обычно 17px)

Это можно как-нибудь фиксить без js? Может быть какая-то известная ошибка вёрстки. Если нельзя исправить это вёрсткой, то возможно для этого есть готовый общеизвестный скрипт (как например clearfix в css).

Запретить горизонтальный скролл - не выход, потому что проблема не в наличии скролла, а в отсутствии жадности ширины у блока. К тому же горизонтальный скролл может потребоваться по прямому назначению, если у блока не останется места для расширения

Пример: https://jsfiddle.net/etsw8nuh/

<div class="block">
  <div class="wrap">
    <div class="wrap2">
       <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="item">Lorem ipsum dolor.</div>
    </div>
  </div>
</div>

.block {
  position: relative;
}
.wrap {
  position: absolute;
  background: red;
  max-height: 150px;
  overflow: auto;
}
/* Code below fixes trouble when scroll size is 17px */
/* .wrap2 {
  margin-right: 17px;
} */
.item {
  white-space: nowrap;
  background: blue;
}

UPD

Кажется это баг https://bugzilla.mozilla.org/show_bug.cgi?id=1474932 (демо) Если это до сих пор невозможно исправить стилями, то возможно есть известные js патчи, если это так, сошлитесь на такой патч.

Answer 1

Дефолтная ширина у .wrap выставляется разная, т.к. этот блок имеет абсолютное позиционирование. Для того чтобы исправить проблему необходимо выставить .wrap 100% ширину, и если необходимо ограничить этот блок по ширине использовать max-width

.wrap {
  position: absolute;
  background: red;
  max-height: 150px;
  overflow: auto;
  width: 100%; /*добавлено*/
  max-width: 400px; /*добавлено*/
}

Answer 2

Мне помогло навесить на контент, у которого скролл, свойства:

z-index: 1
position: relative

БЛОГ НА HUSL

Блок overflow auto внутри flex перестаёт расширяться в firefox, скролл перекрывает контент

UPD

Ответы (2 шт):