javascript - Adding content and float outer screen on body -

is there way scroll horizontally if content going beyond 100% width?

for example: have blank page , continuous adding divs container ajax.

css parent div:

position:absolute; top: 50px; left:240px; height: calc(100% - 50px); width:calc(100% - 240px); background: #f1f1f8; white-space: nowrap; overflow: auto; 

the child divs added ajax:

position: relative; height:100%; top:0px; bottom:0px; width:auto; min-width: 300px; padding-left:30px; padding-right:30px; background-color:#282d32; float:left; 

if add more divs breaks line, want scrollbar scroll horizontally.

the problem white-space:nowrap takes no effects floating elements layout. can set child divs display:inline-block instead.

if need horizontal scrollbar, can overflow-x:auto + overflow-y:hidden.

.parent {    font-size: 0; /*remove whitespace*/    position: absolute;    top: 50px;    left: 240px;    height: calc(100% - 50px);    width: calc(100% - 240px);    background: #f1f1f8;    white-space: nowrap;    overflow-x: auto;    overflow-y: hidden;  }  .child {    font-size: 16px;    position: relative;    height: 100%;    top: 0px;    bottom: 0px;    width: auto;    min-width: 300px;    padding-left: 30px;    padding-right: 30px;    background-color: #282d32;    display: inline-block;  }  .child:nth-child(even) {    background-color: #464e55;  }

<div class="parent">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div>