Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
alexandergitter opened this issue Jan 31, 2024 · 6 comments
Labels
bug Existing features not working as expected

Comments

@alexandergitter
Copy link
Contributor

alexandergitter commented Jan 31, 2024

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

@liZe liZe added the bug Existing features not working as expected label Feb 3, 2024
@xavidotron
Copy link
Contributor

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
Copy link

Is there any workaround for this at the moment?

@liZe
Copy link
Member

liZe commented Jul 11, 2024

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
Copy link

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
Copy link
Member

liZe commented Jul 11, 2024

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

Grid layout, of course!

@dhdaines
Copy link
Contributor

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Existing features not working as expected
Projects
None yet
Development

No branches or pull requests

5 participants