Mediocre Mediocre - 2 years ago 122
CSS Question

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

I have a simple code base


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


.displayContainer {
height: 100%;
width: 100%;
overflow: auto;
white-space: nowrap;

.sideBar {
display: inline-block;
width: 20%;
height: 100%;

.contentHolder {
display: inline-block;
width: 100%;
height: 100%;

I just wanted to create a
and a
inside of a
. Now the problem is display container is displaying unnecessary vertical scroll bar. Horizontal scroll bar has to be with it. But there is no need for a vertical scroll bar.

I have inspected and found that the display container and the inner child elements are having same computed height. Then why the vertical scroll bar is displaying? I do not want it basically. Can anyone give idea on how to remove that?


Answer Source

This is the source of your problem: display: inline-block.

The initial value of the vertical-align property, which applies to inline-level elements, is baseline. This allows browsers to provide a bit of space below elements to accommodate descenders.

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

enter image description here


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

This increases the height of the element which launches the vertical scroll bar.

To see the descender space simply scroll to the bottom of your demo. You'll notice the small gap (demo from the question).

Here are several ways to handle this:

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

  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.)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download