0

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

6
  • добавил к .wrap{ display:flex } и заработало))
    – grime
    3 фев 2020 в 21:37
  • @grime куда добавил? Покажи пример. У меня это ничего не меняет
    – user347794
    3 фев 2020 в 21:39
  • fastpic.ru/fullview/111/2020/0204/…
    – grime
    3 фев 2020 в 21:43
  • @grime понял. Проблема не в этом. Я хочу что бы блок расширялся пока есть свободное пространство. Этот блок не расширяется при любом количестве свободного пространства
    – user347794
    3 фев 2020 в 21:51
  • overflow-y: scroll вместо overflow: auto?
    – grime
    3 фев 2020 в 22:05

2 ответа 2

0

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

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

1
  • Блок будет расширяться только до размера родителя с position: relative. Это ограничивает размер блока, вместо решения проблемы появления скролла из-за нежелания блока расширяться. Пример: jsfiddle.net/r2nvksoa/2
    – user347794
    4 фев 2020 в 14:55
0

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

z-index: 1
position: relative
1
  • У этого блока свойство position должно быть absolute. В этом смысл задачи
    – user347794
    31 мая 2020 в 14:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.