Я столкнулся с проблемой в браузерах webkit (IE и FF в порядке), где пространство прокрутки зарезервировано для элемента, даже если полоса прокрутки не отображается. Вы можете увидеть в примере, что после того, как средняя зависает, пространство полосы прокрутки по-прежнему сохраняется. Мне просто интересно, если это проблема с Chrome или только часть спецификации HTML/CSS. Этот аналогичный question содержит исправление, но он не объясняет, является ли это ошибкой или нет, и необходимость устанавливать явную ширину для детей не то, что я хочу сделать.
.hidden-scroll {
background: black;
overflow-y: hidden;
height: 400px;
width: 300px;
}
.hidden-scroll:hover {
overflow-y: auto;
}
.no-hover.hidden-scroll:hover {
overflow-y: hidden;
}
.hidden-scroll-content {
background: red;
height: 50px;
}
<body>
<div>No scroll needed</div>
<div class="hidden-scroll">
<div class="hidden-scroll-content">1</div>
<div class="hidden-scroll-content">2</div>
<div class="hidden-scroll-content">3</div>
<div class="hidden-scroll-content">4</div>
</div>
<div>Scroll on hover</div>
<div class="hidden-scroll">
<div class="hidden-scroll-content">1</div>
<div class="hidden-scroll-content">2</div>
<div class="hidden-scroll-content">3</div>
<div class="hidden-scroll-content">4</div>
<div class="hidden-scroll-content">5</div>
<div class="hidden-scroll-content">6</div>
<div class="hidden-scroll-content">7</div>
<div class="hidden-scroll-content">8</div>
<div class="hidden-scroll-content">9</div>
<div class="hidden-scroll-content">10</div>
<div class="hidden-scroll-content">11</div>
<div class="hidden-scroll-content">12</div>
</div>
<div>No scroll on hover</div>
<div class="no-hover hidden-scroll">
<div class="hidden-scroll-content">1</div>
<div class="hidden-scroll-content">2</div>
<div class="hidden-scroll-content">3</div>
<div class="hidden-scroll-content">4</div>
<div class="hidden-scroll-content">5</div>
<div class="hidden-scroll-content">6</div>
<div class="hidden-scroll-content">7</div>
<div class="hidden-scroll-content">8</div>
<div class="hidden-scroll-content">9</div>
<div class="hidden-scroll-content">10</div>
<div class="hidden-scroll-content">11</div>
<div class="hidden-scroll-content">12</div>
</div>
</body>