Make flex child equal height of parent inside of grid column

Question

I'm trying to build a pricing table where each column contains a card. I want all cards to stretch to the height of their parent (.col) elements.

Note: I'm using Bootstrap 4, and trying to achieve this with the existing grid system (for the sake of consistency) and with this particular piece of markup. I can't get the cards to grow to the height of their parent containers. Is this even possible with the current markup?

The basic markup is this:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

Here is my pen: https://codepen.io/anon/pen/oZXWJB

http://stackoverflow.com/q/33636796/3597276 – Michael Benjamin Feb 27 '17 at 12:48 — Michael Benjamin, Feb 27 '17 at 12:48

score 17 · Accepted Answer · answered Feb 27 '17 at 09:26

17

Add flex-grow : 1; to your .card rule. HTML markup is fine.

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.

answered Feb 27 '17 at 09:26

Sumi Straessle

1,116
12
23

1

That's perfect. Thanks for that! As a bonus question, is it possible to have all cards remain the same height when they stack? (Guessing not possible without JS) – JCraine Feb 27 '17 at 23:38
Look at this [codepen](https://codepen.io/sumi1985/pen/mWeXVV). That's how I would go about it. I'm using jQuery though. Do you need to achieve the same result in pure JS? I'm not aware of a pure CSS technique to keep track of the biggest height among siblings. – Sumi Straessle Feb 28 '17 at 17:57
Thanks Sumi, that's fine - was just curious if such a flex feature existed. JQuery will do. – JCraine Mar 01 '17 at 00:05

score 7 · Answer 2 · answered Feb 27 '17 at 09:26

7

You just need to add height: 100% on .card

.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}

DEMO

answered Feb 27 '17 at 09:26

Nenad Vracar

118,580
15
151
176

@Naila Flexbox or height? – Nenad Vracar Feb 27 '17 at 09:46
@Nenand flexbox property , i think align-items and flex-direction not work with ie9 – Jishnu V S Feb 27 '17 at 09:48
This example doesn't actually work for me in desktop Safari - the text overflows out of the container. 'flex-grow: 1' fixed it for me. Thanks for the help though! – JCraine Feb 27 '17 at 23:50

score 5 · Answer 3 · answered Feb 27 '17 at 09:26

5

Just add flex: 1 to your card class. Should be enough. And you don't need display: flex; align-items: stretch; flex-direction: column in this class.

answered Feb 27 '17 at 09:26

Marcin

1,426
16
19

score 1 · Answer 4 · answered Feb 27 '17 at 09:52

1

Add height: 100% to .card

.card {
  display: flex;
  height: 100%;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
}

example - https://codepen.io/anon/pen/zZGzyd

answered Feb 27 '17 at 09:52

grinmax

1,835
1
10
13

score 0 · Answer 5 · answered Feb 27 '17 at 09:26

0

Just make your .cardheight to 100%.

.card{
   height: 100%;
   display: flex;
   padding: 20px;
   background: #002732;
   color: white;
   opacity: 0.5;
   align-items: stretch;
   flex-direction: column;
}

answered Feb 27 '17 at 09:26

Chaitali

631
4
12

score 0 · Answer 6 · edited Sep 26 '18 at 19:25

0

If you're using Bootstrap 4, they already have build-in classes for what you're trying to achieve.

Add card-deck to <div class="row card-deck">

here's screenshot

edited Sep 26 '18 at 19:25

TylerH

20,799
66
75
101

answered Sep 26 '18 at 19:23

Lana Kushnir

11

I'd be weary of using these as they're not responsive on mobile (not sure why). – JCraine Sep 26 '18 at 23:31

score 0 · Answer 7 · edited Oct 19 '21 at 18:53

0

Add display: inline-block; on .col and min-height: 100%; on .class

.row {
  display: flex; 
  ...
  }
.col { 
  display: inline-block; 
  ...
  }
.card {
  min-height:100%;
  ...
  }`

edited Oct 19 '21 at 18:53

Rojo

2,749
1
13
34

answered Oct 19 '21 at 10:40

Dawit Tesfamariam

44
4

score 0 · Answer 8 · answered Aug 20 '23 at 12:51

To make elements stretch vertically within a .col class using flexbox, simply add inline-style to the .col element:

<div style={{alignItems:"stretch"}} class="col">

or

add the align-items: stretch; property to the .col class:

.col {
    align-items: stretch;
    ...rest
}

Make flex child equal height of parent inside of grid column

8 Answers8

Linked