I am facing a challenge with my nested structure where a div contains ul which in turn contains another div. I need the content of the innermost div to display beyond the width boundaries of the ul or outer div.
/* Positioning */
#box1 {
position: absolute;
overflow: hidden
}
#box2 {
position: relative
}
#box3 {
position: absolute;
top: 10px
}
/* Styling */
#box1 {
background: red;
padding: 5px;
width: 125px
}
#box2 {
background: blue;
padding: 2px;
width: 125px;
height: 100px
}
#box3 {
background: green;
padding: 2px;
width: 500px;
height: 150px
}<div id="box1">
<ul id="box2">
<li>
<div id="box3" />
</li>
</ul>
</div>Check out https://jsfiddle.net/ob641d3s/
Note: This code was functional on Chrome 47, but it stopped working on Chrome 49 and later versions on Mac. However, it still works fine on Chrome for Windows.