Horizontal scrolling page, mobile browsers adding

I am trying to have a page that scrolls horizontally and not vertically. The code below works on desktop browsers, but when viewing the page in a mobile browser I get a problem. I can still scroll horizontally, but the height is not restricted to 100vh and a large amount of empty space is populated below the wrapper.

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <div class="wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>

    </html>

    .html, body {
        max-height:100vh;}

    .wrapper{
        width:2300px;
        display:flex;
        background-color:red;
        height:100vh;
        max-height:100vh;
        overflow:scroll;
        -webkit-overflow-scrolling:touch}

    .box{
        position:relative;
        align-self: center;
        margin-left:50px;
        float:left;
        width:400px;
        height:400px;
        background-color:white;}

I made a codepen to show you my solution. I have not tested this on mobile.

However! On my chromebook with chrome browser I initially had the whitespace issue you mentioned was mobile-specific. I added a few lines you can see I commented in the JS part of the codepen. Specifically I made sure the body had margin: 0; and then used overflow-x and overflow-y properties on the body and .wrapper to further control the scrollbars that were causing some whitespace with the use of vh.

HTML:

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <div class="wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

CSS:

.html, body {
    margin: 0;
    overflow-y: hidden;
    max-height:100vh;}

    .wrapper{
        width: 2300px;
        display:flex;
        background-color:red;
        height:100vh;
        max-height:100vh;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling:touch}

    .box{
        position:relative;
        align-self: center;
        margin-left:50px;
        float:left;
        width:400px;
        height:400px;
        background-color:white;}