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.