Why Is There a Vertical Scroll Bar If Parent and Child Have the Same Height

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

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.

Sample Image

^{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:

Override vertical-align: baseline with vertical-align: bottom (or another value).
Switch from display: inline-block to display: block.
Set a line-height: 0 on the parent.
Set a font-size: 0 on the parent. (If necessary, you can restore the font-size on the children.)

Child is same size as parent, but scroll appears

You need to change both .svg-container and .svg to display: block

.widget-outer {  display: flex;  height: 210px;  width: 400px;  border: 1px solid black;}
.widget {  overflow-y: auto;  flex: 1;}
.svg-container {  text-align: center;  width: 100%;  height: 100%;}
.svg {  max-width: 100%;  max-height: 100%;  display: block;}

<div class="widget-outer">  <div class="widget">    <div class="svg-container">      <svg class="svg" viewBox="0 0 100 100">        <circle cx="50" cy="50" r="50" style="fill: gray;"></circle>      </svg>    </div>  </div></div>

How come child div causes vertical scrollbar to show up with absolute parent?

Inline-block elements participate in an inline formatting context. That means that there are line boxes and the inline boxes are vertically aligned inside those.

That vertical alignment can be set with vertical-align, which initially is baseline. That causes the usually unwanted space underneath. That can be fixed setting vertical-align to top, bottom, middle, ...

In this case, my guess is that IE don't like vertical-align: top, so it doesn't solve this space issue underneath your element. Thus, 100% + space > 100%, so there is overflow.

But you can solve it with

.view {
  vertical-align: middle;
}

.box {    position: absolute;    top: 0;    bottom: 60px;    left: 0;    right: 0;    height: auto;    width: auto;    border: 2px solid red;    overflow: auto;}.view {    height: 100%;    width: 100%;    display: inline-block;    vertical-align: middle;}

<div class='box'>  <div class='view'></div></div>

Why using CSS display:grid of parent element shows a scroll bar for child element?

both grid and flex will give you scroll bar for a similar reason which is the default stretch alignment. inner-container will get stretched to its parent height due to that alignment so it's like having height:100% then you have your scrollbar because of the overflow: scroll

No other display can do the same because the stretch alignment exits only with flexbox and CSS grid.

If you disable it, it won't happen:

.container {
  display: grid;
  grid-row: 2;
  grid-column: 2;
  height: 100px;
  align-items:start;
}

.inner-container {
  overflow-style: auto;
  overflow-y: scroll;
}

<div class="container">
  <div class="inner-container">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>

Having trouble getting a vertical scroll bar in a child div

You can use a flex layout

#wrap {  margin: 10px;  border: 2px solid black;}
.container {  padding: 4px 3px;  margin: 0;  height: 50vh;  /* As a percentage of the parent. */  /* height: 300px;    /* This causes the scroll bar to appear, but can't be used because the height must adjust to the size of the screen. */  display: flex;  flex-direction: column;}
.box-header {  background-color: green;  padding: 5px 10px;  color: white;}
.box-content {  border: 3px solid blue;  padding: 5px;  padding-top: 10px;  overflow-y: scroll;}

<div id="wrap">  <div class="container" style="border: 4px solid red">    <div class="box-header"> Header in the B1 div.</div>    <div class="box-content">      <p>line 1</p>      <p>line 2</p>      <p>line 3</p>      <p>line 4</p>      <p>line 5</p>      <p>line 6</p>      <p>line 7</p>      <p>line 8</p>      <p>line 9</p>      <p>line 10</p>      <p>line 11</p>      <p>line 12</p>      <p>line 13</p>      <p>line 14</p>      <p>line 15</p>      <p>line 16</p>      <p>line 17</p>      <p>line 18</p>      <p>line 19</p>    </div>  </div></div>

How to add scrollbar to parent div in html css?

It does make sense.
The CSS code you have provided renders a page like this

Sample Image

Here width of both parent and child are same, so you are not able to observe the overflow
Make a slight change to the width of the child so that the parent is visible like this

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 100px;
}

Now the output will be

Sample Image

As we can see the 'pink colored element' is the child which has a greater height property value than the parent is overflowing.

By default the overflow value is visible. So we can see the element overflowing the parent.

Because the child is overflowing the parent.
We must define a overflow property on the parent.

As the document you have linked from w3 says, if the overflow property is set to auto, it will add a scrollbar if the content is overflowing

Here is a codepen demonstrating the same.

For better understanding I have altered the width and margin of the child.

Please let me know, If this justifies the statement

How to make child div scrollable when it exceeds parent height?

Overflow only works when you give it a value to overflow when greater than. Your value is relative to how big the top is, so using jQuery, grab that value then subtract from the parent.

$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});

and add overflow's to the children

.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}

http://jsfiddle.net/m9goxrbk/

Why Is There a Vertical Scroll Bar If Parent and Child Have the Same Height