JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
</div>

CSS

.super-scroller {
    border: 1px solid green;
    overflow-x: scroll;
    padding: 5px;
    margin: 10px auto;
    width: 90%;
}
.horizontal-fit {
    display: table;
    border: 1px solid blue;
}
.horizontal-fit .outer-block {
    display: table-cell;
}
.horizontal-fit .inner-block {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 5px;
    width: 200px;
    height: 100px;
}
.wide {
    width: 150%;
}
.narrow {
    width: 50%;
}