Home Why is there a small gap at the bottom of an `overflow: auto` box when overflowing?

Questions

Why is there a small gap at the bottom of an `overflow: auto` box when overflowing?

July 27, 2023

I have the following demo setup. As you can see, for some reason, there is a small gap at the and I have no idea why it is there and how to get rid of it. Any explanation of what is going on would be appreciated.

#container {
  width: 100%;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
}

.content {
  background: #aaffaa;
  font-size: 8rem;
  line-height: 1;
}

<div id="container">
  <div class="content">CONTENT</div>
  <div class="content">CONTENT</div>
  <div class="content">CONTENT</div>
</div>

>Solution :

The text content is overflowing the line box. You can see this if you add some span with outline or border:

#container {
  width: full;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
}

.content {
  background: #aaffaa;
  font-size: 8rem;
  line-height: 1;
}
.content span {
  border: 1px solid;
}

<div id="container">
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
</div>

You can clearly see how the border is overflowing. The reason is related to the line-height: 1 that set the height of the line box to something smaller than the text content

Don’t do it. You can control the height of a line box but not the height of the text content. Keep the default line-height or use a bigger value

#container {
  width: full;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
}

.content {
  background: #aaffaa;
  font-size: 8rem;
  /*line-height: 1;*/
}
.content span {
  border: 1px solid;
}

<div id="container">
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
</div>