I am struggling with a situation involving 3 layers of nested divs:
<div class="outer">
<div class="inner"><div class="item"></div></div>
</div>
In this scenario, the .inner div is set to position absolute and each div 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 setup causes a scroll bar to appear on the .outer div.
You can check out the code in action on CodePen
I'm unsure why this scroll bar appears and what needs to be adjusted to prevent it. Additionally, increasing the border width of the .inner div to 3px removes the scrollbar. What could be causing this behavior?