Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested flexbox doesn't render correctly

See original GitHub issue

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:

Snímek z 2020-07-23 01-50-50

But the actual result looks like this:

Snímek z 2020-07-23 01-55-08

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?

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

micycle1commented, Jan 31, 2022

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

0reactions

serbboy23commented, Dec 18, 2021

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.