CSS Flexbox Different Sizing...Help Please!


I’m doing the Survery Form project from Responsive Web Design cert and I am trying to use Flexbox to get it done.

I’m having a little trouble in getting the sizes of flexbox the same across the board.
The longer the texts(inside each element), the sizes get bigger.
I have tried various flex-shrink, flex-grow, flex-basis and it still won’t work…

Would you mind helping me on this one?

I’m basically looking to have sized elements in flexbox and the elements should grow/shrink at an equal ratio whenever the browser gets bigger or smaller… appreciate the help!

My codepen below

The main problem is that you didn’t set the width on your input and select elements, so they’re pretty rigid and don’t let their containers scale properly, try to use percentages to fix this and let us know if that solved your problem :slight_smile:

Side tip: Don’t use <br> for spacing. If you need an inline element to go to the next line, set it to display: block;. And if you just need more spacing, use padding or margins :slight_smile: