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: 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.
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: https://css-tricks.com/snippets/css/a-guide-to-flexbox/