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.

Sign up for GitHub

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

Jump to bottom

min-height not applied of flex container #2374

Closed
takis opened this issue Feb 5, 2025 · 5 comments
Closed

min-height not applied of flex container #2374

takis opened this issue Feb 5, 2025 · 5 comments
Labels
bug Existing features not working as expected
Milestone
65.0

Comments

@takis
Copy link

takis commented Feb 5, 2025

Hi,

I'm trying to get WeasyPrint to render a block at the bottom of a page.

Initially, I used this but found it too limiting:

@page {
    @bottom-center {
      content: "Footer";
  }
}

When rendering the HTML below in Chrome, there is whitespace between the main section and the footer.
When using WeasyPrint, they are touching each other as if flex-grow doesn’t work.

<html>
  <head>
    <style>
      article {
        min-height: 50mm;
        display: flex;
        flex-direction: column;
      }
      main {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <article>
      <header>Header</header>
      <main>Main</main>
      <footer>Footer</footer>
    </article>
  </body>
</html>

In the HTML below the footer appears on the next page when rendering using WeasyPrint:

<html>
  <head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 297mm;
        display: flex;
        flex-direction: column;
      }
      main {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
      <header>Header</header>
      <main>Main</main>
      <footer>Footer</footer>
  </body>
</html>
@takis
Copy link
Author

takis commented Feb 5, 2025 •
edited
Loading

I've also tried using CSS Grid to accomplish the same thing, but in Chrome there is whitespace between the main and footer blocks. In WeasyPrint all three tags appear on different pages.

<html>
  <head>
    <style>
      body {
        height: 297mm;
        display: grid;
        grid-template-areas:
          "header"
          "main"
          "footer";
        grid-template-rows: auto 1fr auto;
      }
      header {
        grid-area: header;
      }
      main {
        grid-area: main;
      }
      footer {
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
  </body>
</html>

@liZe
Copy link
Member

liZe commented Feb 5, 2025

Thanks for the report! We’re currently rewriting the flex layout (perfect timing), let’s put this issue in #2362.

@liZe liZe added the bug Existing features not working as expected label Feb 5, 2025
@liZe
Copy link
Member

liZe commented Feb 8, 2025

When using WeasyPrint, they are touching each other as if flex-grow doesn’t work.

The problem is actually min-height being ignored.

I've also tried using CSS Grid to accomplish the same thing, but in Chrome there is whitespace between the main and footer blocks. In WeasyPrint all three tags appear on different pages.

It works if you remove the default page margins and the body margins.

@page {
  margin: 0;
}
body {
  margin: 0;
}

@liZe liZe changed the title flex-grow does not grow min-height not applied of flex container Feb 8, 2025
liZe added a commit that referenced this issue Feb 8, 2025
@liZe
Respect min/max height for flex column containers
98add20 
Fix #2374.
@liZe liZe closed this as completed Feb 8, 2025
@liZe
Copy link
Member

liZe commented Feb 8, 2025

Bug is closed and tested in the flex branch, see #2362.

liZe added a commit that referenced this issue Feb 8, 2025
@liZe
Respect min/max height for flex column containers
635a942 
Fix #2374.
@takis
Copy link
Author

takis commented Feb 17, 2025

Bug is closed and tested in the flex branch, see #2362.

Thank you!

liZe added a commit that referenced this issue Feb 18, 2025
@liZe
Respect min/max height for flex column containers
88557b4 
Fix #2374.
liZe added a commit that referenced this issue Feb 20, 2025
@liZe
Respect min/max height for flex column containers
be0d2e4 
Fix #2374.
@liZe liZe added this to the 65.0 milestone Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
65.0
Development

No branches or pull requests
2 participants
@takis @liZe