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

Back End Help
#1

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
https://codepen.io/aung-kaung-khant/pen/VojxOW

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:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

#2

I’ve forked your pen: https://codepen.io/leebut/pen/rXLKZj

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
#3

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

#4

Yeah, flexbox can save a lot of work.
This is a nice visual guide into flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1 Like