WHY its not scrolling x-axis with overflow-x scroll.Instead it scroll to y-axis

Question

Not scrolling x-axis with overflow-x scroll. Instead it scroll to y-axis.

This code snippet:

  .col { overflow-x: scroll; background-color: #3e5771; width: 90%; height: 200px; margin: auto; border: 2px solid #1abc9c; border-radius: 15px; } .box img { display: inline-block; margin: 8px; } 

  <div class="col"> <div class="box"> <a href="#"><img src="http://lorempixel.com/output/animals-hg-200-400-10.jpg"></a> <a href="#"><img src="http://lorempixel.com/output/animals-hg-200-400-10.jpg"></a> <a href="#"><img src="http://lorempixel.com/output/animals-hg-200-400-10.jpg"></a> <a href="#"><img src="http://lorempixel.com/output/animals-hg-200-400-10.jpg"></a> <a href="#"><img src="http://lorempixel.com/output/animals-hg-200-400-10.jpg"></a> <a href="#"><img src="http://lorempixel.com/output/animals-hg-200-400-10.jpg"></a> </div> </div> 

Answer 1

From what I understand, you want to make a horizontal scrolling and prevent vertical scrolling.

You did set the overflow-x : auto alright, but you forgot to set overflow-y : hidden . Also, to force the content on one row, one easy way is to use display:flex :

 .col { overflow-x: scroll; background-color: #3e5771; width: 90%; height: 200px; margin: auto; border: 2px solid #1abc9c; border-radius: 15px; overflow-y: hidden; /* add this */ } .box{ display : flex; /* add this */ } .box img { /* display: inline-block; Remove this */ margin: 8px; } 

 <div class="col"> <div class="box"> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> <a href="#"><img src="http://lorempixel.com/200/150/"></a> </div> </div>