<div class="root">
    <div class="list">
        <div class="list-header">Header item 1</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 2</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 3</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 4</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 5</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 6</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 7</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 8</div>
        <div class="list-body">List body here</div>
    </div>
    <div class="list">
        <div class="list-header">Header item 9</div>
        <div class="list-body">List body here</div>
    </div>
</div>


<style>
    body {
        overflow: hidden;
        margin: 0;
    }

    .root {
        overflow-y: hidden;
        overflow-x: scroll;
        min-width: 100vw;
        height: 100vh;
        white-space: nowrap;
        font-size: 0; /* To remove the spacing between inline-block children */
    }

    .list {
        display: inline-block;
        width: 150px;
        text-align: center;
        font-size: 16px;
    }

    .list-header {
        padding: 10px;
        background-color: #efefef;
    }
</style>