javascript - how to use browser scroll for x-overflow of internal div? -

i trying implement dynamic page tree structure exceeds width easily. want scroll tree through browser's horizontal scrollbar such separate scroll not appear div. css properties are:

body{ overflow-x:auto; background-color: #ffffff;}  #campaign { width: 100%; overflow: auto; white-space: nowrap;} 

here screenshot current output.

output

the bottom horizontal scroll disappears when scroll vertically up.

thanks.

you can set overflow visible in container div , cause contents go out of 100% width bounds , add scrollbar on body.

here’s simplified example: https://jsbin.com/bejimit/edit?html,css,output

and css:

body {   overflow-x: auto; }  #campaign {   display: inline-block;   width: 100%;   overflow: visible;   white-space: nowrap; } .content-item {   width: 300px;   height: 100px;   border: 1px solid red;   display: inline-block; }