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

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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

回答5:

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