Вертикальная полоса прокрутки ведет к горизонтальной полосе прокрутки

Мой CSS выглядит так:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

Шкала высоты и ширины div автоматически. Высота зафиксировала максимум: как только это значение будет достигнуто, появятся вертикальные полосы прокрутки. Это работает все довольно набухает.

Теперь проблема:
Если появляются вертикальные полосы прокрутки, они используют около 10 пикселей горизонтального пространства, так как полосы прокрутки будут помещены внутри div.
Тем не менее, ширина не автомасштабирована, чтобы позволить этим дополнительным 10-то пикселям, используемым вертикальными полосами прокрутки. Поскольку горизонтальная ширина перед добавлением вертикальных полос прокрутки была точно верна для содержимого (как и ожидалось из установки width:auto), div теперь также отображает горизонтальные полосы прокрутки - чтобы разрешить отсутствующие 10 пикселей. Это глупо.

Как я могу избежать использования этих горизонтальных полос прокрутки и просто автомасштабировать ширину div, чтобы сделать вертикальные полосы прокрутки подходящими?

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

Ответ 1

Я нашел решение, которое работает, но далеки от совершенства:

Я добавил padding-right : 15px в мой div, чтобы автоматически вырастить весь div. Теперь, если появляются вертикальные полосы прокрутки, они вписываются в заполнение, поэтому горизонтальная ширина все еще в порядке.

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

Ответ 2

Просто выдумал довольно приемлемое решение (по крайней мере, для моей версии этой проблемы).

Я предполагаю, что проблема с width: auto заключается в том, что она ведет себя аналогично width: 100vw; проблема в том, что при появлении вертикальной полосы прокрутки ширина окна просмотра остается неизменной (несмотря на полосу прокрутки ~ 10 пикселей), но область просмотра (как я ее называю) уменьшается на 10 пикселей.

По-видимому, определение ширины процент определяет ее в терминах этой "видимой области", поэтому изменение вашего кода на:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}

должен позволить правильному масштабированию содержимого!

p.s. Вы также можете добавить overflow-x: hidden, который остановит горизонтальную полосу прокрутки, вместо этого просто вырежьте ~ 10px с правой стороны вашего div, когда появится вертикальная полоса прокрутки.

Ответ 3

Результат поиска номер 1 в Google по моей проблеме (похож на OP, но не совпадает).

Вот типичный сценарий для ненужной горизонтальной полосы прокрутки:

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

this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});

Ответ 4

Часто настройка 100vw является проблемой. Просто удалите его, и ваша ширина будет равна 100%, что в любом случае будет тем, что вы хотите.