Overflow of div is expanding in y-direction, but need it in the x-direction with scroll

Question

Ok, so I'm making a project gallery with the template of an Image Gallery from W3Schools. I am making this from mobile-first, so sizes are best-matched for iPhone 5-ish.

So I have made it, but the thumbnail container has the overflow expanding in the y-direction but I would like this container to expand into the x-direction and have it scrollable.

Here is a jsfiddle: https://jsfiddle.net/6chv3kry/2/. Note this is quite incomplete, but the thumbnail should be visible with alt tags at the bottom of the page.

I have tried changing to a flex display for the section-projects-thumbnail-row, but this does not work. Is it maybe due to the sizing, if so how can I change it so that it works...thank you!

Here is the relevant code:

.html

<!-- Thumbnail images -->
        <div class="section-projects-thumbnail-row">
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="tree.jfif"  onclick="currentSlide(1)" alt="The Woods">
                <h3 class="section-projects-thumbnail-title">Project Title 1</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="tree2.jfif"  onclick="currentSlide(2)" alt="Cinque Terre">
                <h3 class="section-projects-thumbnail-title">Project Title 2</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="tress.jfif"  onclick="currentSlide(3)" alt="Mountains and fjords">
                <h3 class="section-projects-thumbnail-title">Project Title 3</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="Ltree.jfif"  onclick="currentSlide(4)" alt="Northern Lights">
                <h3 class="section-projects-thumbnail-title">Project Title 4</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="Rtree.jfif"  onclick="currentSlide(5)" alt="Nature and sunrise">
                <h3 class="section-projects-thumbnail-title">Project Title 5</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
            <div class="section-projects-thumbnail-col">
                <img class="section-projects-thumbnail-img cursor" src="ytree.jpg"  onclick="currentSlide(6)" alt="Snowy Mountains">
                <h3 class="section-projects-thumbnail-title">Project Title 6</h3>
                <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
            </div>
        </div>

.css :

body, html {
            max-width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            overflow-x: hidden;
        }


        .section-projects-thumbnail-row{
            
            position: absolute;
            top: 70%;
            height: 20%;
            width: 100%;
            overflow-x: scroll;
        }

        

        /* Six columns side by side */
        .section-projects-thumbnail-col {
            float: left;
            width: 40%;
            height: 100%;
            margin: 2%;
        }

        /* Add a transparency effect for thumnbail images */
        .section-projects-thumbnail-img {
            display: block;
            width: 100%;
            height: 78%;
            opacity: 0.6;
        }

Answer 1

You have 2 options.

You have your 5 section-projects-thumbnail-col floating left with a width of 40% and the container with a width of 100% of the window. There's obviously no room enough.

If you want to make it work that way you have to set your container: section-projects-thumbnail-row 200% width (40% * 5) and all your col will behave a you want asuming you use box-sizing: border-box; so paddings and margins do not take more room than 40%.

Second option could be not using float, set your col to display:inline-blockand add to the container white-space: nowrap;. This would be a better option if the content is going to be dinamic so it will work with 5, 6 or as many elements you want.

Good luck with your project.