I just noticed that somehow image elements inside a flex container don’t seem to shrink, and I cannot figure out why.
div { width: 500px; display: flex; overflow: hidden;}img { flex-shrink: 1;}<div><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="332" height="332" alt=""><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="332" height="332" alt=""></div>It seems to work well with flex-grow, but not with flex-shrink. Why is that?