Is it possible to make a container scroll size dependent on its child only?
The issue arises when the child element (.scrollable) contains absolutely positioned elements that may exceed the boundaries of the child. How can I make sure that the containers scroll size ignores these overflows?
Any suggestions on how to achieve this?
.container {
width: 150px;
height: 150px;
border: 1px #ddd solid;
overflow: auto;
}
.scrollable {
width: 100px;
margin: 5px;
background: linear-gradient(#f79862, #fd6a02)
}
.row {
width: 100%;
position: relative;
height: 30px;
background: linear-gradient(#f79862, #fd6a02)
}
.overflow {
position: absolute;
top: 0;
left: 20px;
height: 400px;
width: 30px;
background: #09c;
z-index: 2;
}<div class="container">
<div class="scrollable">
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
<div class="overflow">
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>In this scenario, I am looking to adjust the scrolling behavior so that it stops as soon as the last orange line becomes visible, rather than showing the entire blue bar.