Иногда при вёрстке блоков с 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 патчи, если это так, сошлитесь на такой патч.