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

Question

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>

Side note, `width: full;` isn't a thing. And why are you setting the line-height to 1? Removing that seems to remove the space — j08691, Jul 26 '23 at 22:27
sorry tailwind brain. full is meant to be 100%. and similarly, line-height 1 is default tailwindcss styling for text. why does that cause a space to appear? I'm so confused. — GeekOverdose, Jul 26 '23 at 22:37

score 2 · Accepted Answer · answered Jul 26 '23 at 22:37

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>

Related: Can specific text character change the line height?

Thankyou for this. the reason line height 1 was set is because it is default tailwind styling, so ill just modify config so it doesn't do that anymore. — GeekOverdose, Jul 26 '23 at 22:54

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

1 Answers1