Why align-items: stretch, is not working in this case
I want all the cards to have the same height, because they have different titles sometimes might be that a card has 2 rows title hence more height, but I want the other to stretch to it, but it is not working
Here is a simple sandbox
https://codesandbox.io/p/sandbox/card-ys3pl3?file=%2Fstyles.css%3A75%2C1
8 Replies
remove height:100%; from product-card and add this
@tok124 (CSS Nerd) thnxxx, I am confused tho why it wasn't working
mostly because of the height:100%;
If you removed the height:100%, the card itself would all have same height. But then you product info did not take full height inside the card
I did not know this thank you for your knowledge. I know it was not my question but it was a good one because it has happened to me before
and the border was applied the the product-info. not the card itself
so they appeared to have different heights
@tok124 (CSS Nerd) but I had tried to add also height 100% to the product-info but without the display flex in the card itself it wasn't working
most likely because of the height:100%; on the product-card class. This prevented the elements from stretching to same height
Hi OP, just to second and expand upon toks advice, fixed heights are dangerous. even min-heights should be used with extreme care. So many issues stem from the dev touching heights , as you’ve just learned. aspect-ratio is a safer property if you need it but most of the time you just want your content and padding to make up the size of the element then use your flex and grid tools for something like this if you need all your cards to be the same height. That’s why grid is so great: we can tell the griid what size we want the children to be and then the child takes up its cell within. All just to warn you that declaring a height property should be avoided at all costs ! It always causes more problems then it solves and using 100% on the height can be tricky too.