Div к низу родительского? Без position: absolute!

257

07 апреля 2017, 22:27

Есть примерно такой документ:

<div .Вообще-Отец>
    <div .Отец>
        <p>Бла бла, какой-то контент
        <div .Спиногрыз>
        </div>
    </div>
    <div .Отец>
        <p>Бла бла, какой-то контент
        <div .Спиногрыз>
        </div>
    </div>
</div>

Нужно выровнять всех "спиногрызов" к низу "Отцов", но все не так просто. Отцы - flexbox элементы (чтобы имели одинаковую высоту всегда), и когда какому-то отцу привалило богатство в виде дополнительного контента, остальные отцы тоже увеличивают свою высоту и под "спиногрызами" остается свободное пространство - это не красиво.

Позиционирование абсолютное тоже не подойдет, потому что дизайн адаптивен и детишки меняют свою высоту непредсказуемо, т.е. я не знаю каким образом задать отступ снизу, чтобы дети не наползали на контент. vertical-aling: bottom примененный к спиногрызам, почему-то тоже не дал результата.

Сделать это надо только силами css.

Подскажите, кто знает! Если необходимо, можно и уйти с flexbox на table-cell, без разницы, главное сделать

Вот скрин:

Answer 1

Ну например дать "отцам" тоже display:flex

.absolute-parent { 
  border: 2px solid; 
  display: flex; 
} 
 
.parent:first-of-type { 
  height: 200px; 
} 
 
.parent:first-of-type p { 
  height: 120px; 
} 
 
.parent { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
} 
 
.child { 
  height: 40px; 
}

<div class="absolute-parent"> 
  <div class="parent"> 
    <p>Бла бла, какой-то контент 
 
      <div class="child"> 
        дите 
      </div> 
 
  </div> 
  <div class="parent"> 
 
    <p>Бла бла, какой-то контент 
 
      <div class="child"> 
        дите 
      </div> 
  </div> 
</div>