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

Question

I'm trying to make a layout of 2 divs of full width and 2 divs of half width (the last 2 divs should be in one line).

The HTML is like the 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 the 2 last divs doesn't have a half of available width and why aren't they in one line. I would like to avoid adding a wrapper for the last 2 divs.

I found that adding flex: 0 1 50% applies the desired width to the last 2 divs but they still are not inline.

Is it possible to make them inline without making an additional wrapper?

Here's the link to codepen: http://codepen.io/sunpietro/pen/Mepmam

Answer 1

They are not in the same line, because they do have margin, and margins take a little space, so you have to 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>

Answer 2

That is because of .25rem margin on each .box, so what you can do is use calc(50% - .50rem) which is equal to 50% - margin on both sides of box

* {
  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 calc(50% - .50rem);
}

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

Note: box-sizing: border-box keeps the padding and border inside width of element, but not the margin.

Also if you want box--half to stay 50% and not stretch to full width you can use flex: 0 0 calc(50% - .50rem).

* {
  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: 0 0 calc(50% - .50rem);
}

<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 class="box--half">4</div>
</div>