Stretch flexbox child, чтобы заполнить высоту колонки

Question

Я построю трехстоечную раскладку, содержащую карты, и все карты имеют одинаковую высоту (проверьте .card), но визуально это не так, поскольку элементы .card-info меняются по высоте и имеют цвет фона.

Я ищу способ автоматически растянуть высоту .card-info, чтобы заполнить оставшееся пространство под ним в пределах .card.

В случае, если кто-либо предлагает это, я не могу установить цвет фона на .card, так как я реализую флип-анимацию, и карта не анимирует ее должным образом.

CSS:

.events-row { 
    display: flex; 
    justify-content: space-around; 
} 
.events-row .card { 
    flex-basis: 31.3%; 
    position: relative; 
} 
.events-row .card .card-info { 
    padding: 15px; 
    background-color: grey; 
    text-align: left; 
    font-size: 1rem; 
    color: white; 
} 
.events-row .card .card-info .button-cont { 
    text-align: center; 
} 
.events-row .card .card-info .button-cont .button { 
    display: inline-block; 
    margin: 30px; 
    padding: 10px 30px; 
    font-size: 1em; 
} 

Состав:

<div id="events-cont"> 
    <div class="events-row"> 
    <div class="card"> 
     <div class="card-img four-three-img"> 
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a> 
      </div> 
      <div class="card-info"> 
      <h2>Event title</h2> 
      <h3>Event date</h3> 
      <h3>Event venue</h3> 
      <p> 
       Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      </p> 
     </div> 
    </div> 
    </div> 
</div> 

Демо: http://codepen.io/ourcore/pen/xgLyMW

Answer 1

Вам просто нужно добавить 3 строки в свой CSS:

.card { 
     flex-basis: 31.3%; 
     position: relative; 
     display: flex; 
     flex-direction: column; 


     .card-info { 
      padding: 15px; 
      background-color: grey; 
      text-align: left; 
      font-size: 1rem; 
      color: white; 
      flex-grow: 1; 

сделать сами карты, чтобы быть гибким, а затем установить их в столбец, поэтому ничего не меняется визуально, но установить гибкий вырастали из информационного раздела, чтобы быть 1.

Answer 2

Вероятно, не идеально, но вы можете:

.card-flip-cont { 
    height:100%; 
} 
.front { 
    height:100%; 
    overflow-y:hidden; 
} 
.card-info { 
    height:100%; 
} 

Answer 3

Вы можете сделать вложенные flexboxes до front и сделать его колонкиflexbox, и вы можете добавить flex: 1 к card-info элементу:

.events-row .card { 
    display: flex; 
} 
.events-row .card .card-flip-cont { 
    display: flex; 
} 
.events-row .card .card-flip-cont .front{ 
    display: flex; 
    flex-direction: column; 
} 
.events-row .card .card-info{ 
    flex: 1; 
} 

Смотрите демо ниже после добавления в этих стилях:

.events-row { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 
.events-row .card { 
 
    flex-basis: 31.3%; 
 
    position: relative; 
 
} 
 
.events-row .card .card-img { 
 
    position: relative; 
 
} 
 
.events-row .card .card-img img { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 
.events-row .card .card-img .series-caption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 5px 10px; 
 
    width: auto; 
 
    font-size: 1em; 
 
    color: white; 
 
} 
 
.events-row .card .card-info { 
 
    padding: 15px; 
 
    background-color: grey; 
 
    text-align: left; 
 
    font-size: 1rem; 
 
    color: white; 
 
} 
 
.events-row .card .card-info h1, 
 
.events-row .card .card-info h2 { 
 
    padding-bottom: 0; 
 
} 
 
.events-row .card .card-info h2 { 
 
    font-size: 1.75em; 
 
    color: black; 
 
} 
 
.events-row .card .card-info h3 { 
 
    font-size: 1.1em; 
 
    line-height: 1.5; 
 
} 
 
.events-row .card .card-info p { 
 
    padding: 15px 0; 
 
} 
 
.events-row .card .card-info p a { 
 
    font-size: 1.1em; 
 
} 
 
.events-row .card .card-info .button-cont { 
 
    text-align: center; 
 
} 
 
.events-row .card .card-info .button-cont .button { 
 
    display: inline-block; 
 
    margin: 30px; 
 
    padding: 10px 30px; 
 
    font-size: 1em; 
 
} 
 

 
/*NEW STYLES*/ 
 

 
.events-row .card { 
 
    display: flex; 
 
} 
 
.events-row .card .card-flip-cont { 
 
    display: flex; 
 
} 
 
.events-row .card .card-flip-cont .front{ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.events-row .card .card-info{ 
 
    flex: 1; 
 
}

<div id="events-cont"> 
 
    <div class="events-row"> 
 
    <div class="card"> 
 
     <div class="card-flip-cont"> 
 
     <div class="front"> 
 
      <div class="card-img four-three-img"> 
 
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a> 
 
      </div> 
 
      <div class="card-info"> 
 
      <h2>Event title</h2> 
 
      <h3>Event date</h3> 
 
      <h3>Event venue</h3> 
 
      <p> 
 
       Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="card"> 
 
     <div class="card-flip-cont"> 
 
     <div class="front"> 
 
      <div class="card-img four-three-img"> 
 
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a> 
 
      </div> 
 
      <div class="card-info"> 
 
      <h2>Event title</h2> 
 
      <h3>Event date</h3> 
 
      <h3>Event venue</h3> 
 
      <p> 
 
       Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
      </p> 
 
      <div class="button-cont"> 
 
       <div class="button purple-button">Buy Tickets</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>