Есть внешний div - content-wrapper. Вложенный в него text-wrapper может увеличивать свои размеры в высоту. При этом, расширяет content-wrapper. Но также есть image-wrapper, который должен заполнять по высоте content-wrapper. Проблема в том, что картинка может быть больше чем нужно, в итоге будет самостоятельно растягивать content-wrapper. Итого - блок text-wrapper может расширять content-wrapper, а image-wrapper должен его только заполнять(на 100% по высоте), но не расширять. Интересует и желательно решение только на css.
HTML:
<div class="book-element">
<div class="content-wrapper">
<div class="image-wrapper">
<img src="img.jpg" alt="bookImage"/>
</div>
<div class="text-wrapper">
<div class="text-wrapper1">
<span class="field-descr">Название: </span>Eragon<br>
<span class="field-descr">Автор: </span>Cristofer Paoloni<br>
<span class="field-descr">Жанр: </span>Фантастика<br>
<span class="field-descr">Издательство: </span>хз<br>
<span class="field-descr">Кол-во страниц: </span>100500<br>
<span class="field-descr">ISBN: </span>123-12345-123-1-1
123-12345-123-1-1 123-12345-123-1-1
<br>
<span class="field-descr">Язык: </span>Русский<br>
<!--<span> </span>-->
<!--<br>-->
<!--<span></span>-->
<!--<br>-->
</div>
<div class="text-wrapper2">
<div class="description">
<span>This is a book. This book contains some test. This text is about teen called Eragon who one time found the dragon`s egg.</span>
</div>
</div>
</div>
</div>
</div>
CSS:
//этот div подстраивается под размеры content-wrapper, он не интересен в данной задаче
.book-element {
border: 1.5px solid #aaaaaa;
border-radius: 5px;
padding: 0.5%;
font-size: 12px;
}
.content-wrapper{
min-height: 130px;
display: flex;
align-items: center;
}
.image-wrapper {
margin-right: 5px;
}
.image-wrapper img{
height: 100%;
max-height: 100%;
min-height: 100%;
border-radius: 5px;
}
.text-wrapper{
height: 100%;
max-height: 100%;
min-height: 100%;
border: 1px solid black;
}