Help with flexbox layout!


So, I am going through the beta.freecodecamp site and making a form. I have been trying to use flexbox for the first time and it’s been going pretty good, except when I got to the bottom submit button.

I basically have divs side by side until the page shrinks, then and @media query changes the flex options.

My problem is I am having trouble with getting divs to clear the divs above when the content gets longer vertically. For example, when the page is smaller the text on the left starts to go on multiple lines and runs into the divs below. Or, the submit button just doesn’t clear the radio buttons at all. I’ve tried a few things but feel like I am totally missing something…

Link to survey site on codepen

I’m sorry I’m on my mobile and it’s hard to see everything but you may need to experiment with flex-direction: column when you get smaller screen widths.

I seemed to always have a hard time visualizing what different rules do for flexbox so I made this:

Try it out! :slight_smile:

Sorry that I wasn’t able to give a good answer before. I’m back home on my mac now.

Taking out the height from .question and .answer seems to fix it.

Yes! Thank you. Finally got this done now. I can’t believe I missed that, I actually forgot I gave them a height at some point. Sheesh. I guess all those memes with people looking for something like a simple typo could not be more true.

1 Like