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. 
Maybe this would help? I watched it and it helped me…
there’s timestamps in the descriptions if you watch on youtube… so you don’t have to watch whole thing if you don’t want.
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.
Ah, the “if necessary” part was what I was missing. Thanks for clearing this up!
lol whoops! Well maybe his video explains it better than his written tutorial, but @bbsmooth’s answer made sense.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.