Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
4 replies
snxxwyy

margin-top and flow utility clash

Hey, i'd like to align the buttons to the end of the cards. I have the elements within the cards spaced out with a flow utility class which uses margin-top. Setting the flow-space on the buttons to 
auto
 does what i'd like however removes the space between the paragraph and button on the card holding the most content (and certain cards when the grid items start stacking when the viewport shrinks) due to the way 
auto
 behaves and the fact it's overriding the default property in the utility of course. I can't set this on just the first two cards in the example as i'm looking for a more flexible solution as you may not know which card has the most content or how many cards there could be. So from this i have two questions.

1. What sort of workaround/fix could i do here?
2. Why must the container (in this case .card) have to be a flex container for margin-top: auto; to work? If i remove it it stops working.

https://codepen.io/deerCabin/pen/YzbLOvV

Thanks in advance.
Was this page helpful?