Что следует сделать в IE11 в данном случае?

Question

[z_u_q]

Из-за того, что ie11 почему-то вычисляет размеры от картинок, складывается такая ситуация:


Как это можно побороть, оставив гибкость? (Чем больше текст, тем длиннее блок, ссылки всегда внизу). Есть варианты?

Код

Answer 1

[xmoonlight]

https://codepen.io/anon/pen/gdOOrR

Comments

[z_u_q]

Здравствуйте, спасибо за ответ, а не подскажете в данном случае к какому блоку это следует применить? код

[xmoonlight]

z_u_q, card-body

[z_u_q]

xmoonlight, добавил, но поведение в ie11 не изменилось. Все тот же огроменный разрыв.

[xmoonlight]

z_u_q, тогда для внутренних блоков - тоже самое...

[z_u_q]

xmoonlight, Сделал так, но результат тот же(

[xmoonlight]

z_u_q, у меня не пашет в Edge, сделал так:

.card {
  display: flex;
  flex-direction: column;
  display: inline-block;
  min-height: 0px;
  background: #e4e6e8;
  }

[z_u_q]

xmoonlight, в вашем варианте ссылки не будут прибиты к низу.

[xmoonlight]

z_u_q, https://codepen.io/anon/pen/gdOOrR

[z_u_q]

xmoonlight, Теперь это стало выглядеть так, почему-то картинки стали себя вести некорректно:

[xmoonlight]

z_u_q, я не трогал картинки.

[xmoonlight]

z_u_q, Советую разобраться в коде прежде, чем его откуда-то брать и пытаться править.

[xmoonlight]

z_u_q, (я обновил линк) надо заменить класс на этот:

.card-head img {
    width: calc(33.33333vw - 26px - .02px);
}

[z_u_q]

xmoonlight, убрал эти стили, помогло. Спасибо.

.card-head,
.card-foot {
  display: inline-block;
	min-height: 0px;
}