Display items in one line with scroll CSS - css

Question

I am trying to display images in a single line horizontal with scroll but I can't figure how to I would appreciate it if anyone could help me.
CSS
.img {
max-width: 400px;
position: relative;
}
.animal {
float: left;
background-color: #fff;
}
.image-grid{
flex-wrap: wrap;
width: 1400px;
margin: 0 auto;
}
.pet-photo {
padding: 10px;
display: block;
box-sizing: border-box;
flex-basis: 100%;
float: left;
padding: 20px;
width: 200px;
height: 300px;
display: block;
}
js
<div class ="image-grid">
<div class="animal">
<img class="pet-photo " src="${pet.photo}" >
<div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
<div id="mydiv">
<h2 class="pet-name">${pet.name}
<h1 class="species">${pet.species}
</div>
<div></div></div>
</div>
</div>
That's all thank you for reading :) really appreciate it.

Answer 1

solution is display: flex; with flex-wrap: nowrap;
.container-items {
overflow: auto;
width: 100%;
}
.items {
display: flex;
flex-wrap: nowrap;
}
.items .item {
min-width: 150px;
text-align: center;
padding: 5px;
}
.items .item h2,
.items .item h3 {
margin: 0;
}
.items .item img {
width: 100%;
}
<div class ="container-items">
<div class ="items">
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3>here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
</div>
</div>