Grid system with box-sizing and flexbox

by Mario Mol

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>

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