Why flex do not respects box-sizing

by AlexMM

HTML

<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

CSS

.horizontal-layout {
  display: flex;
  flex-direction: row;
}

header > span {
  flex: 1 1 100%;
}

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

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

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

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