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

display: flex rendering issue #1311

Closed
matuqam opened this issue Mar 11, 2021 · 4 comments
Closed

display: flex rendering issue #1311

matuqam opened this issue Mar 11, 2021 · 4 comments
Labels
bug Existing features not working as expected

Comments

@matuqam
Copy link

matuqam commented Mar 11, 2021

This minimal example shows issue when using flexbox with display: flex.

Note: I am currently using: WeasyPrint version 52.3

Using a flex container that has two div columns which will overlap on each other if the contents of one is much longer than the other one. See html source and images with result vs expected.

<!DOCTYPE html>
<html>
<head>
<style>
@page {
 size: letter;
 margin: 1in;
 padding: 0px;
 @top-left-corner{
   background: lightblue;
   width: 100%;
   height: 100%;
   content: '';
 }
 @bottom-right-corner {
   background: lightblue;
   width: 100%;
   height: 100%;
   content: '';
 }
}
div {
 border: solid black 1px;
}
</style>
</head>
<body style="padding: 0px; margin: 0px;">
<div id='container' style="display: flex; flex-direction: row;">
         <div id='div1'>THIS PART WON'T SHOW PROPERLY</div>
         <div id='div2'>AS THIS PART BECOMES LONGER, IT WILL OVERFLOW ON THE PREVIOUS DIV, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

Expected pdf output:

expected

Actual output:

result

I noticed a similar issue when searching before posting this issue but it is for nested flexbox: https://github.com/Kozea/WeasyPrint/issues/1171

Regards,

@liZe liZe added the bug Existing features not working as expected label Mar 27, 2021
@liZe
Copy link
Member

liZe commented Sep 27, 2021

The bug is caused by multiple useless calls to block_level_layout and block_level_layout_switch during the flex layout. Each call causes the floats to be added to the list of excluded shapes, adding a lot of empty space to the content.

TODOs had been added in the code, as doing the layout multiple times is definitely a bad idea for performance issues, with extra side effects as this one. Here are the culprits:

liZe added a commit that referenced this issue Sep 27, 2021
@Tarik-Kada
Copy link

Is there a fix to this problem? I have the same problem. It also happens when using display: flex in a

element.

@liZe
Copy link
Member

liZe commented Dec 27, 2022

Is there a fix to this problem?

Not yet. We have to rewrite a clean support of Flex (and add support of Grid), but it’s a large task, and so far we’ve had quite a lot of sponsored work to do. So, even if this feature has a high priority, it’s not done yet!

@liZe
Copy link
Member

liZe commented Feb 7, 2025

This bug has been fixed in the flex branch, probably by fixing #2359. See #2362.

@liZe liZe closed this as completed Feb 7, 2025
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

3 participants