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>We can see the desired behaviour if we swap the img for a div:
.container { border: 1px solid; display: flex;}.item { border: 1px solid;}.dynamicHeightContent { width: 120px; height: 100%; background-color: green;}.content { width: 200px; height: 50px; background-color: hotPink;}<div class="container"><div class="item"><div class="dynamicHeightContent"></div></div><div class="item"><div class="content"></div></div></div>I have tried min-height: 0 on the img, to no avail.
- What is the special behaviour that applies to
imgbut notdiv? - How can we opt out of
img's special behaviour so that it behaves like other flex items (such asdiv)? If there isn't a way to opt-out, is there a recommended workaround?
Note that whilst the img won't shrink its height, it does appear to grow:
.container { border: 1px solid; display: flex;}.item { border: 1px solid;}.content { width: 200px; height: 300px; 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>Note: I'm happy to disregard the img's aspect ratio. I plan to avoid skewing the img via object-fit: cover.