Home Make flex container give each children half the space. Why is flex-grow 1 not working?

Questions

Make flex container give each children half the space. Why is flex-grow 1 not working?

August 10, 2022

I think I’m misunderstanding something here. I want to have two children in my flex-container and give them equal space by setting each to flex-grow: 1. But for some reason the one grows more than the other…

The code looks like this:

<body>
    <div class="container">
        <div id="chart">
            <svg>
            </svg>
        </div>
        <div id="description">description</div>
    </div>
</body>

</html>

<style>
    body,
    html {
        margin: 0
    }

    .container {
        border: 1px solid black;
        width: 80vw;
        margin: 0 auto;
        margin-top: 50vh;
        transform: translateY(-50%);
        display: flex;
        position: relative;
    }

    .container>div {
        border: 4px dashed gold;
        flex-grow: 1;
    }

    svg {
        width: 100%;
    }
</style>

The result looks like this, but I would like to be both equal width.

>Solution :

Every time this has happened to me I fixed it with the property flex-basis.

    body,
    html {
        margin: 0
    }

    .container {
        border: 1px solid black;
        width: 80vw;
        margin: 0 auto;
        margin-top: 50vh;
        transform: translateY(-50%);
        display: flex;
        position: relative;
    }

    .container>div {
        flex-basis: 0;
        border: 4px dashed gold;
        flex-grow: 1;
    }

    svg {
        width: 100%;
    }

<body>
    <div class="container">
        <div id="chart">
            <svg>
            </svg>
        </div>
        <div id="description">description</div>
    </div>
</body>

</html>

Hope this helps!

EDIT:

The solution posted by Alex also works -> flex-basis: 50%;
And in this case it would be the quickest solution!

I just prefer using flex-grow since it usually works better than using percentages in other cases.