L'activation de défilement horizontale dans flexbox

Je suis nouveau sur flexbox, et je suis en train de faire un défilement horizontal site web. L'idée est de montrer le premier élément que 100% de la hauteur et de la largeur, comme recouvrant l'écran avec le reste des éléments de la droite, qui ne seront affichés que lorsque je scroll.

Voici une image de ce que je suis en train de faire:
L'activation de défilement horizontale dans flexbox

J'ai essayé le premier élément à 100% de largeur, mais il est encore ajusté, tout comme d'autres éléments.

Voici mon code CSS:

    body
    {
        margin: 0;
        padding: 0;
        background-color: rgb(242, 242, 242);

    }
    .flex-container
    {
        display: -webkit-box;      
        display: -moz-box;         
        display: -ms-flexbox;     
        display: -webkit-flex;     
        display: flex;    

        flex-flow:row;  
        height:100%;
        position:absolute;
        width:100%;


        /*flex-wrap:wrap;*/
    }
    .box
    {
        padding: 20px;
        color:white;
        font-size:22px;
        background-color: crimson;
        border:1px solid white;
        flex:1;
        -webkit-flex:1;
        text-align:center;
    min-width:200px;



    }
    .splash

    {
        background-image: url(1.jpg);
        width:100%;
            background-size:cover;
        background-position:50% 50%;
        background-repeat: no-repeat;
            transition: all 0.6s ease;
            flex:10;
        -webkit-flex:10;

    }

    .flex1:hover
    {
            flex:4;
        -webkit-flex:4; 
    }

Et mon code HTML:

<div class="flex-container">        
    <div class="box splash">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>