positioning images automatically

Question

I have a lot of images inside the div box i would like te images to come to the side as soon as it exceeds the height of the bo can i do this using css

<div id="box" style="height:100px">
  <img id="img1" image1.jpg" width="200px" height="200px"></img>
  <img id="img2" image2.jpg" width="200px" height="200px"></img>
      .
      .
      .
</div>

Answer 1

Use flexbox with direction of column and wrap, and set the height:

#box {
  display: flex;
  height: 700px;
  flex-direction: column;
  flex-wrap: wrap;
}

<div id="box">
  <img id="img1" src="http://cat-bounce.com/cb.png" width="200px" height="200px"></img>
  <img id="img2" src="http://rs150.pbsrc.com/albums/s85/michelleNpete/BaBas/awesome-beautiful-blue-eyes-cat-cute-Favimcom-110476.jpg~c200" width="200px" height="200px"></img>
  <img id="img3" src="http://rs854.pbsrc.com/albums/ab109/lacilu22/Animals%20II/animashki-9.gif~c200" width="200px" height="200px"></img>
  <img id="img4" src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2013/10/angry-cat-200x200.jpg" width="200px" height="200px"></img>
</div>