0ct0pu5
/
ladybird


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!DOCTYPE html>
<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html" />
<style>
    html {
        background: white;
    }
    body {
        position: absolute;
        inset: 0px;
        display: flex;
        background: pink;
    }
    #outer {
        margin-top: 100px;
        overflow-x: hidden;
        overflow-y: scroll;
        background: orange;
    }
    #inner {
        height: 1000px;
        background: magenta;
    }
    .item {
        box-sizing: border-box;
        border: 1px solid black;
        width: 200px;
        height: 50px;
        overflow: hidden;
        background: lime;
    }
</style><body><div id="outer"><div id="inner">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<script>
    const scrollContainer = document.getElementById("outer");
    scrollContainer.scrollTop = 500;
</script>