scrollbar - scrollable contents overlaps on fixed non-scrollable content -

i want scrollable part of page scroll within it's height only. overlaps header position has been set 'fixed'.

here fiddle: https://jsfiddle.net/3xc9n6jb/

how make them not overlap scrollable content scrolls without touching header?

<div class="main-div">     <div class="mybox"></div> <!--this red rectangle header. scrollable content should not overlap this.-->     <div class="scrollable-content horizontal">         <ul>             <li>first item</li>             <li>second item</li>             <li>third item</li>             <li>fourth item</li>             <li>fifth item</li>             <li>sixth item</li>             <li>seventh item</li>             <li>eight item</li>             <li>ninth item</li>             <li>tenth item</li>         </ul>      </div> </div>  .mybox {     width: 500px;     height: 50px;     background-color: red;     position: fixed; }  ul {    position: absolute;    margin-top: 30px; } 

maybe want this:

  <div class="main-div"> <div class="mybox"></div> <!--this red rectangle header. scrollable content should not overlap this.--> <div class="scrollable-content horizontal">     <ul>         <li>first item</li>         <li>second item</li>         <li>third item</li>         <li>fourth item</li>         <li>fifth item</li>         <li>sixth item</li>         <li>seventh item</li>         <li>eight item</li>         <li>ninth item</li>         <li>tenth item</li>         <li>first item</li>         <li>second item</li>         <li>third item</li>         <li>fourth item</li>         <li>fifth item</li>         <li>sixth item</li>         <li>seventh item</li>         <li>eight item</li>         <li>ninth item</li>         <li>tenth item</li>         <li>first item</li>         <li>second item</li>         <li>third item</li>         <li>fourth item</li>         <li>fifth item</li>         <li>sixth item</li>         <li>seventh item</li>         <li>eight item</li>         <li>ninth item</li>         <li>tenth item</li>         <li>first item</li>         <li>second item</li>         <li>third item</li>         <li>fourth item</li>         <li>fifth item</li>         <li>sixth item</li>         <li>seventh item</li>         <li>eight item</li>         <li>ninth item</li>         <li>tenth item</li>     </ul>   

  .mybox {     width: 500px;     height: 50px;     background-color: red;     position: fixed;     top:0;  }  ul {    margin-top: 50px; } 

the key dont use position:absolute in ul selector , add value of margin-top equals height of mybox.