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

Question

I have box div that takes up all space by absolute positioning. Inside of box, there is another div which should take up same position height/width 100%.

Somehow on IE11, vertical scrollbar is showing up. (Chrome, Firefox does not show the scrollbar)

I believe scrollbar shows up because something is overflowing but I cannot figure out why.

box div's overflow has to be set to auto so if anytthing overflows it should show the vertical scrollbar but in the fiddle sample, there should not be anything that overflows as far as I understand. Any thoughts?

http://jsfiddle.net/30w11ph2/8/

HTML:

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

CSS:

.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: top;
}

Answer 1

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>

Alternatively, you can use a block instead of an inline-block:

.view {
  display: block;
}

.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: block;
}

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