JSFiddle - React, Tailwind, and code Playground

HTML

<article class="main-container grid_5 column">
                <!-- Main Container -->
                    <aside class="category-row">
                        <div class="product-listing">
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                             </div>
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                             </div>
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                             </div>
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                             </div>
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                             </div>
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </div>
                            <div class="list">
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </div>
                        </div>
                    </aside>
                </article>

CSS

.product-listing {
    padding: 0;
    width: 50%;
    overflow: auto;
    border:1px solid #333;
}

.product-listing {
    padding: 0;
    width: 50%;
    overflow: scroll;
    border: 1px solid #333;
    display: -moz-box;
    display: -webkit-box;
}
.list {
    width: 230px;  background:#ddd;
    border: 1px solid #888;
    height: 40px;
}