Почему устранение полос прокрутки оставляет пробел?

Question

В нижней части столбца ".one" есть таинственный пробел.

Я понял, что это результат запроса на отсутствие полос прокрутки.

Тем не менее, каким-то образом вертикальная полоса прокрутки полностью исчезает, но горизонтальная прокрутка исчезает, оставляя зазор на своем месте.

Что это за пробел и как мне от него избавиться?

d3.select('.one')
  .selectAll('div')
  .data(d3.range(40))
  .enter()
  .append('div')
  .attr('class', 'picture box')
  .append('h2')
  .text(d => d);

html, body {
    width: 100%; height: 100%; margin: 0;
}
.container {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 10%;
}

.box {
    background-color: #484848;
    color: #fff;
    border-radius: 5px;
    padding: 1px; margin: 1px;
}

.menu {
    text-align: center;
    overflow: scroll;
}
.menu::-webkit-scrollbar {
    width: 0 !important;
}

.one { grid-column: 1; grid-row: 1; }
.two { grid-column: 2; grid-row: 1; }

div.picture {
    box-sizing: content-box;
    max-width: 100%;

    border: 2px solid gray;
    border-radius: 5px;

    background-color: #222;
    display: flex;
    justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
    <div class="box one menu noscrollbar">
        <h2>One</h2>
    </div>
    <div class="box two menu noscrollbar">
        <h2>Two</h2>
    </div>
</div>

Answer 1

Было бы полезно узнать, в каком браузере вы видите эту проблему. В Firefox на Mac со скрытыми полосами прокрутки в нижней части столбца .one нет пробела.

Однако вы можете попробовать overflow-y: scroll на .menu вместо overflow, поскольку это будет прокручивать контейнер только по оси Y. overflow-x - это, конечно, компаньон.

Answer 2

Это потому, что когда вы позволяете ему прокручиваться, это оставляет место для горизонтальной полосы прокрутки. Скажите, чтобы только прокрутить по оси Y (вверх и вниз) с overflow-y: scroll в CSS.

Из Mozilla:

Содержимое обрезается, если необходимо, для заполнения поля дополнения. Браузеры всегда отображают полосы прокрутки вне зависимости от того, является ли контент фактически обрезанным, предотвращая появление или исчезновение полос прокрутки при изменении содержимого. Принтеры могут по-прежнему печатать переполненный контент.

Полное объяснение страницы при переполнении: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

См. Решение ниже:

d3.select('.one')
  .selectAll('div')
  .data(d3.range(40))
  .enter()
  .append('div')
  .attr('class', 'picture box')
  .append('h2')
  .text(d => d);

html, body {
    width: 100%; height: 100%; margin: 0;
}
.container {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 10%;
}

.box {
    background-color: #484848;
    color: #fff;
    border-radius: 5px;
    padding: 1px; margin: 1px;
}

.menu {
    text-align: center;
    overflow-y: scroll;
}
.menu::-webkit-scrollbar {
    width: 0 !important;
}

.one { grid-column: 1; grid-row: 1; }
.two { grid-column: 2; grid-row: 1; }

div.picture {
    box-sizing: content-box;
    max-width: 100%;

    border: 2px solid gray;
    border-radius: 5px;

    background-color: #222;
    display: flex;
    justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
    <div class="box one menu noscrollbar">
        <h2>One</h2>
    </div>
    <div class="box two menu noscrollbar">
        <h2>Two</h2>
    </div>
</div>