title: Enabling horizontal scroll in flexbox
body: <p>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.</p>
  
  <p>Here is an image of what I am trying to do:
  <img src="https://i.stack.imgur.com/3TiOu.jpg" alt="enter image description here"></p>
  
  <p><strong>I tried setting the first item to 100% width, but it's still fitted just like other items.</strong></p>
  
  <p>Here is my CSS code:</p>
  
  <pre><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; 
      }
  </code></pre>
  
  <p>And my HTML code:</p>
  
  <pre><code>&lt;div class="flex-container"&gt;        
      &lt;div class="box splash"&gt;1&lt;/div&gt;
      &lt;div class="box"&gt;2&lt;/div&gt;
      &lt;div class="box"&gt;3&lt;/div&gt;
      &lt;div class="box"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>