Nested divs create a scroll bar. What for?

Question

I have 3 nested divs:

<div class="outer"> <div class="inner"><div class="item"></div></div> </div> 

.inner div is an absolute position, and each of them has a 1px border:

 .outer{ width:50%; height:100px; border: 1px solid red; position:relative; overflow-x:hidden; box-sizing:border-box; } .inner{ border:1px solid blue; height:100%; position: absolute; box-sizing: border-box; } .item{ width:100px; height:100%; background-color:yellow; display: inline-block; border:1px solid green; box-sizing:border-box; } 

This layout results in a scrollbar appearing on div.outer.

Here codepen

Why is this and what do I need to change to stop it?

If the width of the border of the .inner div is increased to 3px, then the scroll bar disappears. Again, why is this happening?

Answer 1

This is because your .item element .item set as inline-block . This means that things like line-height and vertical-align affect it.

The default vertical alignment on inline-block elements is basic. This means that they should appear on the base line of any text that can be entered next to it. I'm not 100% sure, but I think there might be a problem here when box-sizing ignored when doing this calculation, and the baseline ends 2 pixels lower where it should be (due to a cumulative 2 pixels border applies to top and bottom of the item).

If you want this element to remain displayed this way, a quick fix is ​​to set its vertical-align to top :

 .item { ... vertical-align: top; } 

Codepen demo .

Answer 2

The strangest thing is that if you remove overflow-x:hidden; , the scroll bar disappears. The reason is that the default behavior of overflow is visible , so if you don't encounter it, the results won't have a scroll bar , but overflow-x to some value sets overflow-y to auto instead of the default value, which is visible , and the result is a scroll bar.

If you set overflow to auto , a scroll bar will appear.

.item , on the other hand, .item set to inline-block , so it has line-height , which creates a space below. Setting .inner to line-height:0 will make the space disappear, and if you increase it, it will also increase.

On the other hand (third hand), you can simply squeeze the space that the elements inside .inner take by setting .inner to overflow:hidden

Answer 3

Why are you using inline-block in the inner element? If you change your scroll lock, it will disappear:

 .item{ width:100px; height:100%; background-color:yellow; display: block; border:1px solid green; box-sizing:border-box; } 

Answer 4

This is because your growth is 100%, then you add 1px borders on each div. Working demo: http://codepen.io/anon/pen/VvbNXp

So your .inner and .item classes need to change the height:

 height:calc(100% - 1px);