html - Scrolling Right Div Unknown Width -

i want have scrolling div right don't know width of box needs be.

if set auto, stops @ maximum width 100%, when give 100% doesn't either. want inside div go long needs create scrollbar @ bottom. way found working give actual width cannot interpret width of inside div be...

here example: https://jsfiddle.net/n0kzm82d/

in example entered width each insider element in theory though know each box's width be, don't know how many divs there.

<div style="width: 100%;height: 250px;overflow-x: scroll;overflow-y: hidden;">             <div style="width: 3000px;height: 250px;">               <div style="width:300px;height:250px;float:left;background:red;">               1               </div>               <div style="width:300px;height:250px;float:left;background:blue;">               2               </div>               <div style="width:300px;height:250px;float:left;background:red;">               3               </div>               <div style="width:300px;height:250px;float:left;background:blue;">               4               </div>               <div style="width:300px;height:250px;float:left;background:red;">               5               </div>               <div style="width:300px;height:250px;float:left;background:blue;">               6               </div>             </div>             </div> 

if got right, can use white-space: nowrap on parent element , use display: inline-block on child elements

.wrap {    overflow-x: auto;    white-space: nowrap;  }    .wrap > div {    background-color: red;    display: inline-block;    height: 250px;    width: 300px;    white-space: initial;    color: white;  }    .wrap > div:nth-child(even) {    background-color: blue;  }

<div class="wrap">      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>