I'm trying to achieve a simple thing that we have in standard CSS.

Let's say that I have a grid system with 3 columns and `box-sizing: border-box`.

That means that I will fit 3 boxes and with a margin that will shrink the size to fit max 3 boxes.

But when I try to do that with FLEXBOX, it's a pain!!

So if I have div's with `flex: 1 1 33.33%; margin: 10px;` I was expecting to have 3 boxes per row... but if I use `flex-wrap: wrap`, that will not shrink to fit 3 boxes .

Here is a example.. the idea is that the second row would have 3 boxes in a row and fourth box would be in the last row.

Thanks

<https://jsfiddle.net/mariohmol/pbkzj984/14/>

```css
.horizontal-layout {
  display: flex;
  flex-direction: row;
  width: 400px;
}

header>span {
  /* flex: 1 1 100%; */
  /* flex: 1 0 100%; */
  flex: 1 1 33.33%;
  margin: 10px;
}

header>.button {
  background-color: grey;
}

header>.app-name {
  background-color: orange;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 1 33.33%;
  box-sizing: border-box;
  /* this is not useful at all */
}

header#with-border-padding>.button {
  border: 1px solid black;
  padding-left: 5px;
}
```

```html
NO flex-wrap: wrap, so it not respects the flex 33% <br/>
<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
  <span class="button">D</span>
</header>
<br/><br/> WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down<br/>
<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
  <span class="button">D</span>
</header>
```