I have a flex container which contains an img
flex item.
I want this img
to disregard its intrinsic height (90px) so that the height may shrink to match the sibling's flex item height (as per the default align-items: stretch
style).
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
See Question&Answers more detail:os