html - DIV fit width content in parent -

i have list of object slider - when clicking on right arrow, left param animates i.e. -500px.

html

<div id="container">    <div id="list">       <div class="elem"></div>       <div class="elem"></div>       <div class="elem"></div>       <div class="elem"></div>       // more ...    </div> </div> 

styles

#container {    width: 500px;    overflow: hidden; } #list {    position: relative;    left: 0px; } .item {    float: left; } 

i want #list fit content - moves overflowed children next line. setting display: inline-block work without parent fixed width.

how can achieve this?

you should use white-space: nowrap #container div.

#container {    width: 500px;    overflow: hidden;    white-space: nowrap;  }  #list {    position: relative;    left: 0px;  }  .item {    float: left;  }  .elem {    background: orange;    width: 200px;    height: 200px;    border: 1px solid #000000;    display: inline-block;  }

<div id="container">    <div id="list">      <div class="elem"></div>      <div class="elem"></div>      <div class="elem"></div>      <div class="elem"></div>      // more ...    </div>  </div>

reference: mdn - white-space