Why does box-sizing: border-box not apply to flex children?

Question

When box-sizing: border-box is set on a flex child, setting flex-basis to 0 (either via e.g. flex: 0 0 0 or via flex: 0 0 auto; height: 0) does not take padding into consideration as expected:

#container {
  width: 400px;
  display: flex;
  flex-direction: column;
  background: green;
}

.a {
  box-sizing: border-box;
  padding: 24px 0;
  flex: 0 0 0;
}

.b {
  background: red;
}

<div id="container">
  <div class="a">This should not be visible!</div>
  <div class="b">Part B</div>
</div>

A workarounds for this issue has been discussed in flex-box box-sizing: border-box not working, but I cannot find an explanation for this behaviour. Every other thread I find about box-sizing and flex says that box-sizing is respected in flex-basis settings - but it doesn't seem to be!

I can only find similar threads about IE10/IE11 bugs, but this is happening consistently in Firefox and Chromium. Is this behaviour according to the spec or not?