html - Why is there a vertical scroll bar if parent and child have the same height?

Question

I want my .sideBar and .contentHolder elements inside of .displayContainer.

The problem is .displayContainer is rendering an unnecessary vertical scroll bar. Horizontal scroll bar is okay, but there is no need for a vertical scroll bar.

I have inspected and found that the .displayContainer and the child elements have the same computed height. So then why is there a vertical scroll bar?

Can anyone give me an idea how to remove it?

body, html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
}
.displayContainer {
  height: 100%;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}
.sideBar {
  background-color: green;
  display: inline-block;
  width: 20%;
  height: 100%;
}
.contentHolder {
  background-color: red;
  display: inline-block;
  width: 100%;
  height: 100%;
}

<div class="displayContainer">
  <div class="sideBar"></div>
  <div class="contentHolder"></div>
</div>

Answer 1

Short Answer

You've run into one of the sneakiest default settings in CSS: vertical-align: baseline

Switch the value to top, bottom or middle, and you should be all set.

---

Explanation

The initial value of the vertical-align property, which applies to inline-level and table-cell elements, is baseline. This allows browsers to provide space below elements for so-called descenders.

In typography, lowercase letters such as j, g, p and y are known as descenders because they breach the baseline.

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: Wikipedia.org}

Being that all inline-level elements are, by default, vertical-align: baseline, elements such as button, input, textarea, img and, like in your code, inline-block divs, will be elevated slightly from the bottom edge of their container.

^{Source: Wikipedia.org}

This descender space adds height inside the container, which causes an overflow and triggers the vertical scroll.

You can see the descender space by scrolling to the bottom of your demo. You'll notice the small gap between the child elements and the bottom edge.

Here are several ways to handle this:

1. Override vertical-align: baseline with vertical-align: bottom (or another value).

2. Switch from display: inline-block to display: block.

3. Set a line-height: 0 on the parent.

4. Set a font-size: 0 on the parent. (If necessary, you can restore the font-size on the children.)