Build a Product Landing Page [Overflowing From a Div Inside Flexbox]

Tell us what’s happening:
The “Purchase” buttons are overflowing out of their div, which is wrapped in flex.
How do I fix so that the div adjusts its height to contain all its contents?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36.

Link to the challenge:

I’ve forked your pen:

You have quite a bit of nesting there. I have added display: flex; and flex-direction: column;, and other things on the buy-button and flex-content.
If you use space-between or space-around, you don’t need to be so precise with the width percentages.
A direct child of a flex container is affected by the container, but I don’t think that a child of the child is.
You might want to add some more flex-wrap so that your products wrap as well.

You could also use flexbox in your nav and not have to mess around with floats.

1 Like

Thanks a lot. It works exactly how I wanted. I’ll have to work more on flexbox knowledge.

Yeah, flexbox can save a lot of work.
This is a nice visual guide into flexbox:

1 Like