flex-box с box-sizing: border-box не работает, потому что граница (очевидно)

/* Styles go here */

*{
  box-sizing: border-box;
}

.table{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.table > caption{
  align-self: flex-end;
}
.row, .header{
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
}

.header{
  font-weight: bold;

}

.header > .col{
  justify-content: center;
}

.col{
  display: flex;
  width: 100%;
  border: 1px solid black;
  flex: 1;
}

.row > .col{
  justify-content: flex-end;
}

    <div class="table">
  <caption>Im a title</caption>
  <div class="header">
    <div class="col">Number 1</div>
    <div class="col">Number 2</div>
    <div class="col">Number 3</div>
  </div>
  <div class="row">
    <div class="col" style="flex:2;">1</div>
    <div class="col" style="flex:0.5;">2</div>
    <div class="col" style="flex:0.5;">3</div>
  </div>

  <div class="row">
    <div class="col">Yep should be</div>
    <div class="col">5</div>
    <div class="col">6</div>
  </div>

  <div class="row">
    <div class="col">7</div>
    <div class="col">this is a different</div>
    <div class="col">9</div>
  </div>
</div>