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

Есть строка с 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 то видим, что они имеют разную высоту, хотя должны иметь одинаковую.
  • Вопрос задан
  • 514 просмотров
Решения вопроса 1
@AntowaKartowa
Все очень просто. У тебя флекбокс ячейка остается той же высоты как ты и ожидаешь. Но рамка цветовая у тебя установлена не на флексбокс блок, а на блок который становиться абсолютным. И его размеры никак не привязаны к родительскому флексбок блоку. Достаточно просто добавить about__card min-height: 100% и все.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы