CSS. Почему блок занимает больше, чем ему нужно?

Question

[Тарас Сереванн]

Такая верстка:

<div class="wrapper">
    <div class="image">...</div>
    <div class="title">...</div>
</div>

.title всегда прижат к низу .wrapper через margin-top:auto, а .image занимает оставшееся пространство через flex: 1.

Полный CSS:

.wrapper {
    display:     display: inline-flex;
    width: 50%;
}
.title {
    margin-top: auto;
}
.image {
    flex: 1;
    object-fit: cover;
}

Т.е. суть в том, чтобы блок .title, который имеет динамическую высоту (зависимою от количества текста внутри него) был прилеплен к низу своего родителя .wrapper, а остальную свободную (так как .wrapper по высоте такой же, как соседний .wrapper) площадь .wrapper занимала картинка.

Но на практике получается вот так:


Т.е. нужно, чтобы .image был максимально низким (возможно, какая-то минимальная высота вроде 100px у него и может быть) и не увеличивал высоту .wrapper.

Надеюсь, понятно объяснил.

Answer 1

[Александр Вульф]

Выложите это на jsfiddle, например. Так будет легче понять :)

Answer 2

[Андрей]

flex, margin-top:auto да вы батенька извращенец
сделай background-img и -size а поверх position:absolute; bottom:0 плашку с текстом

Comments

[Тарас Сереванн]

по-моему, это ещё большее извращение.

[Андрей]

это нормальная практика

[Тарас Сереванн]

Андрей: тем не менее, это не совсем то, что мне нужно. Часть картинки будет закрыта текстом и видно будет только верх.

[Андрей]

Тарас Сереванн: тогда готовьте картинки нужного размера. или хотя бы пропорций

[Тарас Сереванн]

Это тоже не возможно. Кстати, в вашем варианте возможен кейс, когда картинка вообще полностью закрыта текстовой плашкой.