Kozea
display: flex rendering issue
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:
Actual output:
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,
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:
- https://github.com/Kozea/WeasyPrint/blob/313fb3a7f0b67dd61f5c21c2039146c5559e95a3/weasyprint/layout/flex.py#L145
- https://github.com/Kozea/WeasyPrint/blob/313fb3a7f0b67dd61f5c21c2039146c5559e95a3/weasyprint/layout/flex.py#L452-L453
- https://github.com/Kozea/WeasyPrint/blob/313fb3a7f0b67dd61f5c21c2039146c5559e95a3/weasyprint/layout/flex.py#L215
- https://github.com/Kozea/WeasyPrint/blob/313fb3a7f0b67dd61f5c21c2039146c5559e95a3/weasyprint/layout/flex.py#L230
Is there a fix to this problem? I have the same problem. It also happens when using display: flex in a
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!