CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
JCraine
JCraine

Reputation: 1395

Make flex child equal height of parent inside of grid column

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

enter image description here

Upvotes: 24

Views: 78624

Answers (8)

32lp1
32lp1

Reputation: 41

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
}

Upvotes: 2

Dawit Tesfamariam
Dawit Tesfamariam

Reputation: 44

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

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

Upvotes: 0

Lana Kushnir
Lana Kushnir

Reputation: 11

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

Upvotes: 0

grinmax
grinmax

Reputation: 1855

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

Upvotes: 1

Chaitali
Chaitali

Reputation: 651

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;
}

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

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

Upvotes: 7

Marcin
Marcin

Reputation: 1426

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.

Upvotes: 5

Sumi Straessle
Sumi Straessle

Reputation: 1136

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.

Upvotes: 18

Related Questions