Enabling horizontal scroll in flexbox

I am new to flexbox, and I am trying to make a horizontal scrolling website. The idea is to show the first item as 100% height and width, like covering the screen with the remaining items to the right side, which will only be shown when I scroll.

Here is an image of what I am trying to do:

I tried setting the first item to 100% width, but it's still fitted just like other items.

Here is my CSS code:

    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;     }

And my HTML code:

<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>