WeasyPrint Simple flex with fit-content looks different in browser printing pdf and weasyprint

While trying to use flex items with fit-content style I'm trying to find something that works as expected. Using weasyprint 56.1.

E.g. the following looks good in browser and when printed with browser, but looks odd with weasyprint:

<html>
<head>
<style>
@page {
    size: A4;
    margin: 1cm;
}       
#pageborder {
    position:fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: thin solid magenta;
}
@media screen {
    #pageborder {
        display: none;
    }
}       
body {
    margin: 0px;
    padding: 0px;
}
@media screen {
    body {
        width: 19cm; /* A4 = 21cm - 2 * 1cm */
        border: thin solid magenta;
    }}
}       
</style>
</head>
<body>

<div id="pageborder"></div>

<div style="display:flex; flex-direction: column; align-items: center; width: fit-content; border: solid thin red;">
    <div style="border: solid thin blue;">
        Hello World
    </div>
    <div style="border: solid thin green;">
        Foo Bar John Doe
    </div>
</div>

</body>
</html>

In browser the html looks like this: browser_html

When printing it in browser the resulting pdf looks like this: browser_printed_pdf

Weasyprint generates something that looks like this: weasyprint_pdf

Is there any workaround to make weasyprint generated equivalent output to browser ?

Sep 23 '22 10:09 manuel-koch

Hi!

Thanks for your bug report.

There are 2 different problems in this example:

fit-content is not supported yet,
the flex layout has many problems and is known to be broken in many ways.

Unfortunately, there’s no easy workaround, other than waiting for these two problems to be fixed. Improvements to the flexbox layout are definitely on our todo-list, but the level 3 features of box sizing may take more time to come.

Sep 23 '22 12:09 liZe

Looking forward to see those nice features being implemented in weasyprint !

Sep 23 '22 13:09 manuel-koch

Hey @liZe , how are you? First thanks for the amazing work you guys do. I wanted to ask you if there is an estimate time of when support for flex will be added. I was using wkhtmltopdf and in my local environment with Windows the generation of the PDF worked really well using flex, but dont ask me why, when I tried the same in my linux production server, those flex properties were not recognized. I just tried WeasyPrints, which has a really better performance and graphics generation, but sadly flex doesnt work at all in local.

Do you know a workaround or the only way is not to use flex for now?

Thanks and sorry if the question is dumb!

Nov 30 '22 04:11 tomasserravento

Hi!

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. We can’t give a reliable date for this feature as we don’t know yet which features will be sponsored in the next months.

Dec 27 '22 15:12 liZe

This is now somewhat less bad since #2231 but not totally correct either (because fit-content support is still lacking).

It now looks like this:

Aug 19 '24 01:08 dhdaines

Hey, thank you for your work and help! I hope fit-content support gets added someday so I can migrate to weasy print.

Aug 19 '24 22:08 tomasserravento