html - Aligning divs with flexbox. 2 divs full width and 2 divs inline at half of width -

i'm trying make layout of 2 divs of full width , 2 divs of half width (the last 2 divs should in 1 line).

the html following:

<div class="container">     <div class="box--full">1</div>     <div class="box--full">2</div>     <div class="box--half">3</div>     <div class="box--half">4</div> </div> 

the css:

* {     box-sizing: border-box; }  .container {     display: flex;     width: 200px;     flex-flow: row wrap; }  [class*="box--"] {     display: flex;     margin: .25rem;     height: 2rem;     padding: .25rem;     color: white; }  .box--full {     background: red;     flex: 1 1 100%; }  .box--half {         background: blue;     flex: 1 1 50%; } 

i'm wondering why 2 last divs doesn't have half of available width , why aren't in 1 line. avoid adding wrapper last 2 divs.

i found adding flex: 0 1 50% applies desired width last 2 divs still not inline.

is possible make them inline without making additional wrapper?

here's link codepen: http://codepen.io/sunpietro/pen/mepmam

they not in same line, because have margin, , margins take little space, have decrease percentage:

* {      box-sizing: border-box;  }    .container {      display: flex;      width: 200px;      flex-flow: row wrap;  }    [class*="box--"] {      display: flex;      margin: .25rem;      height: 2rem;      padding: .25rem;      color: white;  }    .box--full {      background: red;      flex: 1 1 100%;  }    .box--half {          background: blue;      flex: 1 1 30%;  }

<div class="container">      <div class="box--full">1</div>      <div class="box--full">2</div>      <div class="box--half">3</div>      <div class="box--half">4</div>  </div>