79643659

Date: 2025-05-29 09:38:40
Score: 0.5
Natty:
Report link

With thanks to everyone who commented above, I found comments on Image flex item does not shrink height in a flexbox that suggested using min-width: 0 on the flex items (in my case, the <img> elements), which seems to work. The images resize, smaller than their natural size if the container is narrower than they fit in, and larger when the container is larger.

See this on codepen: https://codepen.io/neekfenwick/pen/EajjJaq

.parent {
  display: flex
  flex-direction: column;
  width: 30%; /* size according to window */
  background-color: lightblue;
  justify-content: stretch;
}

.parent.wider {
  width: 60%; /* size according to window */
}

.icon-wrapper {
  display: flex;
  flex-wrap: nowrap;
  /* Maybe unnecessary, but just to force them to stay on one row */
}

img {
  flex: 1 1 auto;
  min-width: 0; /* allows images to resize smaller than their natural size */
}
<p>See https://stackoverflow.com/a/79641492/141801</p>
<p>With `min-width: 0` on the flex items, the img elements will resize smaller than their natural size when required, and larger too.  The container (with the light blue background) is set to a percentage of the window width, so resizing the window should show how they resize.  See also codepen at <a href="https://codepen.io/neekfenwick/pen/EajjJaq">https://codepen.io/neekfenwick/pen/EajjJaq</a>.</p>

<div class="parent">

  <div class="icon-wrapper">
    <!-- I'm using a CDN image that ought to be online for a good while -->
    <img src="https://cdn-icons-png.flaticon.com/128/1017/1017466.png">
    <img src="https://cdn-icons-png.flaticon.com/128/1017/1017466.png">
    <img src="https://cdn-icons-png.flaticon.com/128/1017/1017466.png">
  </div>
</div>

<p>Here is a wider example</p>

<div class="parent wider">

  <div class="icon-wrapper">
    <!-- I'm using a CDN image that ought to be online for a good while -->
    <img src="https://cdn-icons-png.flaticon.com/128/1017/1017466.png">
    <img src="https://cdn-icons-png.flaticon.com/128/1017/1017466.png">
    <img src="https://cdn-icons-png.flaticon.com/128/1017/1017466.png">
  </div>
</div>

Reasons:
  • Blacklisted phrase (0.5): thanks
  • Blacklisted phrase (1): stackoverflow
  • Contains signature (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • High reputation (-1):
Posted by: Neek