html 带滚动条的div,html – 生成滚动条的嵌套div.为什么？

我有3个嵌套的div：

.inner div是绝对位置,每个都有1px边框：

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

}

这种安排导致.outer div上的滚动条.

为什么这是我需要改变什么来阻止它发生？

如果.inner div的边框宽度增加到3px,则滚动条会消失.再次,为什么会发生这种情况？