force Cards to same height

https://codepen.io/ahad4387/pen/wvxLOev?editors=1000 I'm trying to achieve horizontal scrollbar with all cards of same height. I'm using fixed width right now, but is it possible to make adjust the width to match height of largest card? i've tried align-self:normal, i'm not understanding why it's not working
10 Replies
Unknown User
Unknown User16mo ago
Message Not Public
Sign In & Join Server To View
Abdul Ahad⚡
Abdul Ahad⚡16mo ago
sorry, didn't get you. I want fixed height, variable width to match the height. how can i do that someone please help
Wolle
Wolle16mo ago
1) you have a <div> with a <div> with an <article> inside. That is probably one source of your confusion. 2) if you remove unused classes on your elements, flex-grow will work.
Abdul Ahad⚡
Abdul Ahad⚡16mo ago
okay, I've removed all unnecessary divs and classes. added flex-grow: 1; https://codepen.io/ahad4387/pen/wvxLOev?editors=1000 where am I doing wrong?
ahad4387
CodePen
wvxLOev
...
Wolle
Wolle16mo ago
You got m-auto on your cards, that will center them and keep them from growing.
Abdul Ahad⚡
Abdul Ahad⚡16mo ago
removed it. still doesn't work. 😞 🙄
MarkBoots
MarkBoots16mo ago
add flex-1 to your <article>'s
Abdul Ahad⚡
Abdul Ahad⚡16mo ago
now got it. thank you so much, I mean it from my heart. struggling with it for 2 days, I was really questioning my carrier choices 😆 .
MarkBoots
MarkBoots16mo ago
glad it works now, but i would recommend looking at the whole structure. I think in this case grid would make more sense (and easier), also consider using <blockquote> for the items
Abdul Ahad⚡
Abdul Ahad⚡16mo ago
sure, will change it to blockquote. I tried the grid, i was doing something wrong in that too