Вопрос по выравниванию высоты блоков с помощью flexbox

Question

Как с помощью flexbox сделать, чтобы при выравнивании высоты карточек изменялась высота определенного внутреннего элемента? В моем случае блока с белым фоном.

Answer 1

body {
  margin: 0;
}
.list {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}
.list__item {
  display: flex;
  flex-direction: column;
  border: .2em solid blue;
  margin-left: 1em;
  flex-basis: 30%;
}
.list__item__block {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: .5em;
  box-sizing: border-box;
  width: 100%;
  margin-top: .5em;
  border-bottom: .1em solid blue;
}
.list__item__block:nth-child(3) {
  flex-grow: 1;
}

<div class='list'>
  <div class='list__item'>
    <div class='list__item__block'>Block 1</div>
    <div class='list__item__block'>Block 2</div>
    <div class='list__item__block'>Very very very very very very very very very very very very very very very very very very very very very very very very very very very very very big block 3</div>
    <div class='list__item__block'>Block 4</div>
  </div>
  <div class='list__item'>
    <div class='list__item__block'>Block 1</div>
    <div class='list__item__block'>Block 2</div>
    <div class='list__item__block'>Block 3</div>
    <div class='list__item__block'>Block 4</div>
  </div>
  <div class='list__item'>
    <div class='list__item__block'>Block 1</div>
    <div class='list__item__block'>Block 2</div>
    <div class='list__item__block'>Block 3</div>
    <div class='list__item__block'>Block 4</div>
  </div>
</div>

БЛОГ НА HUSL

Вопрос по выравниванию высоты блоков с помощью flexbox

Ответы (1 шт):