title: Nested flexbox css optimization
body: <p>I'm trying to do an webpage using flexbox, and i'm not able to solve the problem, so i hope some one help me.
  I need screen divided in 4 equal parts.
  For each part i need to put squares inside and they should work like the image depending on the number of squares i want.
  I don't want to have scroll bars, it will be a full screen page without mouse or keyboard.
  i already have this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box-wrapper-inner {
   display: -webkit-box;
   display: -moz-box;
   display: box;
   height:600px;
   border-style: solid;
      border-width: 3px;
  
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   box-orient: horizontal;
  
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
  
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   box-direction: normal;
  
   -webkit-box-align: stretch;
   -moz-box-align: stretch;
   box-align: stretch;
  }
  
  #box1 {
   -webkit-box-ordinal-group: 1;
   -moz-box-ordinal-group: 1;
   box-ordinal-group: 1;
  
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   border-style: solid;
      border-width: 1px;
  }
  
  #box2 {
   -webkit-box-ordinal-group: 1;
   -moz-box-ordinal-group: 1;
   box-ordinal-group: 1;
  
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
  }
  
  #box3 {
   -webkit-box-ordinal-group: 1;
   -moz-box-ordinal-group: 1;
   box-ordinal-group: 1;
  
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
  }
  #box4 {
   -webkit-box-ordinal-group: 1;
   -moz-box-ordinal-group: 1;
   box-ordinal-group: 1;
  
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
  }
  
  #redwrapper {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
      }
  #red {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
   border-style: solid;
      border-width: 1px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;FLEX&lt;/title&gt;
   &lt;style&gt;
   
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="box-wrapper-inner"&gt;
  &lt;div id="box1"&gt;
   &lt;div id="redwrapper"&gt;
    &lt;div id="red"&gt;red&lt;/div&gt;
    &lt;div id="red"&gt;red&lt;/div&gt;
    &lt;div id="red"&gt;red&lt;/div&gt;
    &lt;div id="red"&gt;red&lt;/div&gt;
    &lt;div id="red"&gt;red&lt;/div&gt;
    &lt;div id="red"&gt;red&lt;/div&gt;
   
   &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="box2"&gt;item2&lt;/div&gt;
  &lt;div id="box3"&gt;item3&lt;/div&gt;
  &lt;div id="box4"&gt;item4&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/PJ0f1.png" alt="flexbox problem"></p>