Nested flexbox doesn't render correctly #1171

zelitomas · 2020-07-22T23:57:45Z

Hi,

I have encountered a problem with nested flexbox that I can't figure out how to solve. If I use simple flexbox, everything works as expected, but when I try to nest them, strange things starts to happens.

Here is the most simplified example I could come up with:

    #paper {
        width: 148mm;
        height: 105mm;
        
        display: flex;
        flex-direction: column;
    }
    #content {
        width: 100%;

        display: flex;
        flex-direction: column;
        flex: auto;
        justify-content: space-between;
    }
    #header {
        width: 100%;
        height: 2cm;
    }

<div id="paper">
    <div id="header" style="background-color:lightblue">Header part, should be full width, 2 cm height</div>

    <div id="content">
        <div style="background-color:orange" class="toppart">
            Middle part, should be 100% width, blank space should follow thanks to justify-items: between.
        </div>
        <div class="bottompart" style="background-color:yellow">
            Bottom part. Should be 100% width, blank space before.
        </div>                
    </div>
    
    
</div>

The expected result should look something like this:

But the actual result looks like this:

I couldn't find similar bug, so I'm reporting it here, sorry if it is a duplicate. Is there anything I could do to help fix this issue?

The text was updated successfully, but these errors were encountered:

kingraphaii · 2020-07-24T12:06:19Z

Having same issue here, version 51. Did you find a work around?

zelitomas · 2020-07-26T13:25:14Z

Unfortunately, I have not. And I'm not fluent enough in python to find the bug in the code, unfortunately.

zelitomas · 2020-08-30T11:21:25Z

Hi, Is there any way I could help resolving this issue?

(adding more examples, etc)

liZe · 2020-10-21T15:53:49Z

Hi, Is there any way I could help resolving this issue?

(adding more examples, etc)

I just need more time to fix this issue 🕐. The examples are really useful, thank you!

sharicahill · 2021-10-05T09:07:55Z

Hi, sorry for opening a new issue. I'll keep my comments in this one.

I've found a workaround for the width issue in case anyone else has the same problem. Not sure about the justify-content: space-between; issue with the blank space in the first example.

I think the issue with the widths is related to the percentages on the child elements. If you replace the percentages with fixed values, eg. width: 100px; it renders correctly. Using the flex property on the child elements also works, eg. flex: 1;

liZe · 2021-10-05T09:11:18Z

I think the issue with the widths is related to the percentages on the child elements.

Then it’s probably related to #656 too.

Hi, sorry for opening a new issue.

No problem, thanks for the bug report! It’s always useful to get different examples when there’s an issue.

serbboy23 · 2021-12-18T20:56:56Z

Hello,
I'm also seeing this issue and have tested with version 54.0b1. The elements within my nested flexbox are not filling the width of my parent.
As @sharicahill mentioned, the only workaround is to manually set the with of my elements .. however this is not ideal as some of my elements are dynamic is size.

micycle1 · 2022-01-31T13:53:52Z

Another (simple) example, I believe:

HTML+CSS

Expected layout

WeasyPrint PDF

WeasyPrint layout

@page {
    margin: 1em;
}

article {
    display: flex;
    flex-direction: column;
    max-height: 297mm;
    max-width: 210mm;
    align-content: center;
    margin: 3em 2em;
}

img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
}

article div {
    display: flex;
}

<html>

<head>
    <meta charset="utf-8">
    <link href="columns-test.css" rel="stylesheet">
    <title>test</title>
    <meta name="description" content="Report example">
</head>

<body>
    <article>
        <img src="figures/a.jpg">
        <img src="figures/a.jpg">
        <img src="figures/a.jpg">
        <div>
            <img src="figures/a.jpg">
            <img src="figures/a.jpg">
        </div>
    </article>
</body>

</html>

Adding the following doesn't help PDF output much either.

article div {
    width: 200px;
    height: 200px;
}

Swapping out the nested flexbox for a grid doesn't render as expected too:

article div {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
}

HTML+CSS

WeasyPrint PDF

ankitpandeypagefreezer · 2023-05-16T11:21:39Z

Please fix this issue.

liZe · 2023-05-16T11:28:30Z

Please fix this issue.

Hi!

As maintainers, we’d also love to see this issue fixed. But…

Getting a proper flexbox rendering is long and complicated, and we currently don’t have enough free time to do this right now. The three main solutions you have to get this issue fixed is:

To wait for the maintainers to spend their free time to work on this. As it’s long and complicated, it may not happen soon.
To open a pull request.
To pay someone (for example the maintainers) to fix this.

vesters · 2023-12-15T19:42:03Z

Hi liZe

Thank you very much for your reply. I could be really nice to get some flexbox support for this lovely piece of software.

What amount you estimate would be enough to get this done within a couple of monts maybe?

liZe · 2023-12-18T11:02:23Z

Hi @vesters,

We think that it would take between 1 and 2 weeks full time to get a solid implementation. It’s not that long, but it’s still too long to work seriously on this on our free time.

vesters · 2023-12-28T22:45:19Z

@liZe Thank you for getting back to me on this.

It sounds reasonable - do you guys have a going hourly rate?

liZe · 2024-01-03T16:08:06Z

It sounds reasonable - do you guys have a going hourly rate?

@vesters Let’s discuss about this by mail! You can reach us at contact@courtbouillon.org.

onedapperterm · 2024-04-22T08:05:22Z

At this date the issue is not yet fixed (V61.2), but a workaround is using tables, and yes, is a pain in the neck, but depending on the case it works fine :)

liZe added the bug Existing features not working as expected label Jul 29, 2020

sharicahill mentioned this issue Oct 5, 2021

Nested flexbox width rendering issue #1460

Closed

leducvin mentioned this issue Oct 31, 2022

Flex container: align-items:flex-start with text produces unexpected line returns #1759

Closed

alexandergitter mentioned this issue Feb 1, 2024

Flex containers not positioned correctly when their margin-left/right is set to auto #2054

Closed

liZe mentioned this issue Aug 7, 2024

Incorrect height for flex-direction: column inside flex-direction: row #2222

Closed

dhdaines added a commit to dhdaines/WeasyPrint that referenced this issue Aug 18, 2024

fix: calculate cross size and use calculated size (fixes: Kozea#1171)

03fdc6a

dhdaines mentioned this issue Aug 18, 2024

Fix several problems related to flex-direction: column #2231

Merged

dhdaines added a commit to dhdaines/WeasyPrint that referenced this issue Aug 18, 2024

fix: calculate cross size and use calculated size (fixes: Kozea#1171)

4771c35

liZe closed this as completed in #2231 Aug 24, 2024

liZe added this to the 63.0 milestone Aug 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nested flexbox doesn't render correctly #1171

Nested flexbox doesn't render correctly #1171

zelitomas commented Jul 22, 2020

kingraphaii commented Jul 24, 2020

zelitomas commented Jul 26, 2020

zelitomas commented Aug 30, 2020 •

edited

Loading

liZe commented Oct 21, 2020

sharicahill commented Oct 5, 2021

liZe commented Oct 5, 2021

serbboy23 commented Dec 18, 2021

micycle1 commented Jan 31, 2022 •

edited

Loading

ankitpandeypagefreezer commented May 16, 2023

liZe commented May 16, 2023

vesters commented Dec 15, 2023

liZe commented Dec 18, 2023

vesters commented Dec 28, 2023

liZe commented Jan 3, 2024 •

edited

Loading

onedapperterm commented Apr 22, 2024

Nested flexbox doesn't render correctly #1171

Nested flexbox doesn't render correctly #1171

Comments

zelitomas commented Jul 22, 2020

kingraphaii commented Jul 24, 2020

zelitomas commented Jul 26, 2020

zelitomas commented Aug 30, 2020 • edited Loading

liZe commented Oct 21, 2020

sharicahill commented Oct 5, 2021

liZe commented Oct 5, 2021

serbboy23 commented Dec 18, 2021

micycle1 commented Jan 31, 2022 • edited Loading

HTML+CSS

WeasyPrint PDF

HTML+CSS

WeasyPrint PDF

ankitpandeypagefreezer commented May 16, 2023

liZe commented May 16, 2023

vesters commented Dec 15, 2023

liZe commented Dec 18, 2023

vesters commented Dec 28, 2023

liZe commented Jan 3, 2024 • edited Loading

onedapperterm commented Apr 22, 2024

zelitomas commented Aug 30, 2020 •

edited

Loading

micycle1 commented Jan 31, 2022 •

edited

Loading

liZe commented Jan 3, 2024 •

edited

Loading