Почему теряется высота у одного из flex блоков, если ему задать position:absolute?

Question

[Алексей Скляров]

Есть строка с 3мя блоками описанием:

.flex-row {
  display: flex;
  flex-wrap: wrap;
  align-content:stretch;
  > .col-md-4 {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width:33.33333333%;
  }
}

Разметка:

<div class="flex-row row">
     <div class="col-md-4">
          <div class="about__card"></div>
     </div>
     </div>

В каждой карточке есть дополнительное описание, которое скрыто и показывается, когда мы наводим на карточку. Причем карточке .about__card задается position:absolute, чтобы карточка оставалась на месте, но увеличивалась в высоте, не двигая другие карточки. Все работает как нужно, но если я наведу на карточку, в котором нет доп описания, то эта карточка принимает высоту уже свою родную, а не ту, которую она получает за счет самого "высокого" блока в ряде.

В чем может быть причина?

https://codepen.io/anon/pen/Njvmag - если мы наводим на 4 блок, потом на 5 то видим, что они имеют разную высоту, хотя должны иметь одинаковую.

Comments

[myskypesla]

Google закрылся?

[Роман Ямчук]

Приведите пожалуйста пример на любом ресурсе

[Алексей Скляров]

myskypesla: нагуглите, отмечу решением.

[Алексей Скляров]

Роман Ямчук: https://codepen.io/anon/pen/Njvmag наводим на первый блок во второй строке и на второй блок в этой же строке. и ощущаем разницу.

[Ankhena]

Алексей Скляров: position absolute выводит блок из потока

[Алексей Скляров]

Ankhena W: это я знаю, его я использую для того, чтобы при наведении блок увеличивался, но не смещал другие блоки. Есть ли другое решение этой задачи?

[Ankhena]

Алексей Скляров: Например, узнавать на js высоту в нормальном положении и задавать ее как минимальную для hover

Answer 1

[Antowa Kartowa]

Все очень просто. У тебя флекбокс ячейка остается той же высоты как ты и ожидаешь. Но рамка цветовая у тебя установлена не на флексбокс блок, а на блок который становиться абсолютным. И его размеры никак не привязаны к родительскому флексбок блоку. Достаточно просто добавить about__card min-height: 100% и все.