border-box-sized flex container with flex-direction "column" grows taller than it should

[alexandergitter]

In the following example, the flex container is rendered taller than wider by WeasyPrint, whereas browsers show it as a perfect square (per width: 20rem, height: 20rem and box-sizing: border-box).

It appears to be related to the way vertical padding is factored into the box's dimensions. This does not happen with flex-direction: row, where the dimensions are calculated correctly and the box ends up being square.

<style>
  div {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: 20rem;
    padding-top: 10rem;
    background: black;
  }
</style>

<div></div>

[xavidotron]

I happened to find another example that seems to be the same issue with flex-direction: row, when a square div with box-sizing: border-box is placed within a flex-direction: row flexbox container.

<style>
* {
    box-sizing: border-box;
}
.flex {
    width: 2in;
    background: grey;
    display: flex;
}
.box {
    height: 1in;
    width: 1in;
    border: 15px solid black;
    background: red;
}
</style>

<div class="flex">
  <div class="box"></div>
</div>