Why does eliminating scrollbars leave a gap?

Question

There is a mysterious gap at the bottom of the ".one" column.

I gathered that this results from requesting no scroll bars.

Yet somehow the vertical scrollbar disappears entirely, but the horizontal scroll disappears while leaving a gap in its place.

What is this gap and how do I get rid of it?

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

It's because when you allow it to scroll, it's leaving a place for the horizontal scrollbar. Tell it to only scroll on the y-axis (up and down) with overflow-y: scroll in the css.

From Mozilla:

Content is clipped if necessary to fit the padding box. Browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes. Printers may still print overflowing content.

Full page explainer on overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

See solution below:

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>