Can't get overflow-x:scroll working on page - html

Question

I'm attempting to create an image gallery and want it to appear as a horizontal strip at the bottom of the page that can be scrolled along from left to right to view all of the images. However, something about my code is preventing me from using overflow-x:scroll on the bottom-gallery div or the thumnbail-wrap div. Instead of the images continuing left to right, they automatically start stacking on eachother if the viewport is small enough. Even if I explicitly add overflow-x:scroll to #bottom-gallery and .thumbnail-wrap, they will get set to overflow-y instead, making them scrollable vertically which I don't want.
I have included relevant markup and css below. I suspected that flexbox styling may have contributed to my problem but I toyed with removing all flexbox references in the css and the problem persisted.
Are there known things that prevent layouts from scrolling horizontally?
Markup:
<div class="col-xs-12 hidden-md hidden-lg" id="bottom-gallery">
<div class="thumbnail-wrap">
<img src="assets/images/beardo-thumb.jpg" alt="thumbnail">
<img src="assets/images/grecian-thumb.jpg" alt="thumbnail">
<img src="assets/images/kreg-portrait-thumb.jpg" alt="thumbnail">
<img src="assets/images/pigblood-thumb.jpg" alt="thumbnail">
<img src="assets/images/zombie-thumb.jpg" alt="thumbnail">
</div>
</div>
CSS:
#bottom-gallery {
height:15vh;
padding:15px 0;
div.thumbnail-wrap {
justify-content:flex-start;
a {
width:75px;
height:75px;
margin-bottom:15px;
margin-right:10px;
}
}
}
div.thumbnail-wrap {
display:flex;
flex-flow:row wrap;
img {
width:100%;
height:100%;
}
}

Answer 1

Here's the minimal needed to get you started:
.thumbnail-wrap {
overflow-x: scroll;
display: flex;
}
.thumbnail-wrap .thumb-link {
display: inline-block;
flex: 1 0 auto;
}
<div class="thumbnail-wrap">
<a href='' class='thumb-link'><img src="//placehold.it/400x100/0bf" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/fb0" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/0fb" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/f0b" alt='th'></a>
</div>