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

Question

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.

flex works the same as flex-grow, but flex-grow requires to use at least flex-basis/flex-shrink. It's more straight forward although the other method gives more possibilities. — PhobosFerro, Aug 10 '22 at 08:35

PhobosFerro · Accepted Answer · 2022-08-10T08:30:54.637

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.

score 2 · Answer 2 · answered Aug 10 '22 at 08:29

You need to add flex-shrinkto 1 and flex-basis to 0 which will give all elements the same starting point and it will allow them to grow more:

<body>

<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; 
        flex-shrink: 1; 
        flex-basis: 0;
    }

    svg {
        width: 100%;
    }
</style>
    <div class="container">
        <div id="chart">
            <svg>
            </svg>
        </div>
        <div id="description">description</div>
    </div>
</body>

</html>

score 0 · Answer 3 · answered Aug 10 '22 at 08:58

I think its because you didn't mention the size of the child div elements. flex-grow will work if you remove svg tag as it occupies extra space by default. If you remove it then your flex-grow property will work. Otherwise set your child divs width to 50% if you don't wanna remove svg

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

3 Answers3