I’m having some confusion with flex-grow. I have this codepen that demonstrates what I mean.
Essentially, when I remove the <h2> and <p> from the <div class="col">, then the flex-grow actually seems to take effect. Otherwise, it doesn’t. I’m guessing this may have something to do with the <h2> and <p> being block-level elements, but I’m not sure. I just want to understand why this is happening.
Here’s the definition of flex-grow from css-tricks:
“This defines the ability for a flex item to grow if necessary.”
Notice the bold part. In other words, only if there is remaining space left will flex-grow have any affect. Since block level elements like <h2> and <p> try to take up all the horizontal space they can, you get three evenly sized columns in your case. If you want them to be different widths then use the width property on them.