search

Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.09k stars 672 forks source link

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

Open alexandergitter opened 7 months ago

alexandergitter commented 7 months ago

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>

image

xavidotron commented 5 months ago

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>

image

TechInterMezzo commented 2 months ago

Is there any workaround for this at the moment?

liZe commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

Grid layout, of course!

dhdaines commented 1 month ago

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)