CSS: Grid does not correctly calculate height of an element

Probably huge huge connection to https://github.com/LadybirdBrowser/ladybird/issues/1812

Description: Website https://lichess.org has two buttons. "Donate" and "Swag store". These two buttons get stretched when opened in Ladybird. I created a (somewhat) minimal html code to reproduce the effect.

Information about the host system and the version of the browser: OS: Debian GNU/Linux 12 (bookworm) x86_64 Kernel: 6.1.0-17-amd64 Compiler: gcc (GCC) 14.2.0 Build command: ./Meta/ladybird.sh run ladybird Head commit when compiling: 44b1c4f2b59563cf29f6af81bb86645f2fa89155

More details: The website changes its layout depending on the window's size. The buttons remain in the correct size when the window size is small/medium. But when the width of the window is bigger, then the layout adjusts and the buttons get stretched. (if your browser crashes when you try to scroll down the lichess.org page, disable javascript and then open the page again) I assume this is a Grid issue, as out of hundreds of lines of CSS, grid related code is what's mostly left.

https://github.com/user-attachments/assets/fc6cffaa-4a71-440f-ab81-c8bfac38586a

Minimal code to reproduce the bug:


<!DOCTYPE html>
<head>
    <!--
    FOR DARK THEME contains var(--c-bg-box); used in lobby__support (I replaced it for simplicity)
    <link data-css-key="common.theme.all" href="https://lichess1.org/assets/css/common.theme.all.c1f6a1e0.css" rel="stylesheet" />  
    <link data-css-key="site" href="https://lichess1.org/assets/css/site.cf08da8a.css" rel="stylesheet" />
    <link data-css-key="lobby" href="https://lichess1.org/assets/css/lobby.aaf43fba.css" rel="stylesheet" />
    -->
    <style>
        /* <link data-css-key="site" href="site.cf08da8a.css" rel="stylesheet"> */
    #main-wrap {
        display: grid;
        /* grid-template-areas: ". . main . ."; makes this less severe */
        grid-template-columns: var(---main-margin) 1fr minmax(auto, var(---main-max-width)) 1fr var(---main-margin);
        /* something with grid-template-columns */

    }

        /* <link data-css-key="lobby" href="lobby.aaf43fba.css" rel="stylesheet"> */
    .lobby__support a {
        background: hsl(37, 7%, 14%);

    }
    .lobby {
        ---cols: 1;
        grid-area: main;
        display: grid;
    }

    @media(min-width: 499.3px) {

        .lobby__support {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
    @media(min-width: 1259.3px) {
        .lobby {
            ---cols: 4;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: fit-content(0) min-content auto repeat(3, fit-content(0));
            grid-template-areas: "side   app     app     table" "tv     blog    blog    puzzle" "tv     support support puzzle" "feed   feed    tours   tours" ".      about   about   ."
        }
        .lobby__support {
            grid-gap: var(---block-gap)
        }
    }

    .lobby__support {
        grid-area: support
    }

    body {
        overflow-y: scroll
    }

    #main-wrap {
        ---main-max-width: 1400px
            /* delete this and it will be more severe */
    }

    .lobby__side {
        overflow: hidden
    }

    </style>
</head>

<body class="dark coords-in simple-board mobile">

<div id="main-wrap" class="is2d">
    <main class="lobby">
        <div class="lobby__side">
            <div></div>
            <div class="about-side">It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            deleting this breaks the bug
            </div>
        </div>
        <div></div>
        <div></div>
        <div>
            <div></div>
        </div>
        <div>
            <div>
                <div><div>
            </div>
        </div>
        <div><div>
    </div>
    </div>
        <div><div>
    </div>
    </div>
    </div>
    </div>

        <div class="lobby__support">
            <a href="/patron">
            Donate
            Become a Lichess Patron
            </a>
            <a href="https://shop.spreadshirt.com/lichess-org">
            Swag Store
            Play chess in style
            </a>
        </div>
    </main>
</div>

</body>
</html>

Body but with classes. It doesn't change anything, but maybe it will help understand what the divs are for. There are divs that are closed but not even opened so I don't know.

<body class="dark coords-in simple-board mobile">

<div id="main-wrap" class="is2d">
    <main class="lobby">
        <div class="lobby__side">
            <div class="lobby__spotlights"></div>
            <div class="about-side">It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            It turns out that the longer this part is, the bigger the support object's height is
            deleting this breaks the bug
            </div>
        </div>
        <div class="lobby__tv"></div>
        <div class="lobby__blog ublog-post-cards"></div>
        <div class="lobby__tournaments-simuls">
            <div class="lobby__tournaments lobby__box"></div>
        </div>
        <div class="lobby__feed">
            <div class="daily-feed__updates">
                <div class="daily-feed__update"><div>
            </div>
        </div>
        <div class="daily-feed__update"><div>
    </div>
    </div>
        <div class="daily-feed__update"><div>
    </div>
    </div>
    </div>
    </div>

        <div class="lobby__support">
            <a href="/patron">
            Donate
            Become a Lichess Patron
            </a>
            <a href="https://shop.spreadshirt.com/lichess-org">
            Swag Store
            Play chess in style
            </a>
        </div>
    </main>
</div>

</body>

I was simply deleting code as long as the bug persisted.

Screenshots:

Firefox: (different board color is because I am logged in) lichess_website_in_firefox

Ladybird: lichess_website

Video demo:

https://github.com/user-attachments/assets/38ba7066-4fd6-44be-9328-3a4a4acd8333

I hope this will help someone. Good luck.

LadybirdBrowser / ladybird

CSS: Grid does not correctly calculate height of an element #1975