Individual sizing of div while using flex

Question

I am using display: flex to create a responsive card-based dashboard.

I noticed that the cards (each individual element div) all shrink or expand vertically to maintain the same size when in a row. So, the height of the biggest (or highest) card is inherited by the rest of the cards in the same row.

Note: When you resize the Fiddle window, you will notice this happens only when more than one card is present in a row. So, when the window is too small to allow only one card horizontally, the size is dependent on the content inside.

I can't seem to figure out which property is doing that so here's my question:

How to get the cards to NOT get resized?

OR

How to retain the responsiveness without using display: flex

You can add `align-items: flex-start;` on flex container but i think you want masonry for this. — Nenad Vracar, Jul 31 '17 at 09:43
Do you mean the css attribute 'flex' or the programming language? In case you don't mean the programming language, read the quickinfo of tag 'flex'. — Reporter, Jul 31 '17 at 09:44

score 1 · Accepted Answer · answered Jul 31 '17 at 09:48

1

If you don't want the cards to be resized, you should had align-items: flex-start on the flex container and remove the min-height: 250px on the cards. Maybe you can set height: auto on the cards

answered Jul 31 '17 at 09:48

Victor Allegret

2,344
3
18
31

I need the `min-height` to make sure that the cards don't look weird when there's no content in them – Shreyas Tripathy Jul 31 '17 at 09:50
Than make the min-height 120px – Gerard Jul 31 '17 at 09:51
Actually, `align-items: flex-start` did the trick. Thanks – Shreyas Tripathy Jul 31 '17 at 09:52

Individual sizing of div while using flex

1 Answers1