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>

[TechInterMezzo]

Is there any workaround for this at the moment?

[liZe]

Is there any workaround for this at the moment?

I don’t think so. Flex layout has to be fully rewritten, but that’s quite a lot of work…

[TechInterMezzo]

I don’t think so. Flex layout has to be fully rewritten, but that’s quite a lot of work…

What would you suggest for now as an alternative to create grids? Should I just use good old tables?

[liZe]

What would you suggest for now as an alternative to create grids? Should I just use good old tables?

Grid layout, of course!

[dhdaines]

Right, these are symptoms of what I mention in #2231 as "the code is definitely not correct" - there is considerable confusion between inner and outer sizes in the flex code. So if you use box-sizing: border-box you won't get good results for the moment.

Since I'm in the flex code already ... I may try to sort these out as they seem pretty straightforward, it's a "simple matter of box models" (lol)