There are lots of questions on SO like this but I haven't found a solution for this specific problem yet. I have a layout with a flex-direction: column parent that has a fixed width (I am omitting lots of detail about why, not important here), and in it I want a row of <img> icons, which all have equal image size, to appear side by side and equally sized.
I find that the images lay out horizontally but do not scale down according to flex-shrink: 1, they appear full size and overflow the parent container with flex-direction: column.
/* Parent has fixed width and flex-direction: column */.parent { display: flex; flex-direction: column; width: 300px; /* Something restrictive for this demo */ background-color: lightblue;}.icon-wrapper { display: flex; flex-wrap: nowrap; /* Maybe unnecessary, but just to force them to stay on one row */}.icon-wrapper > img { flex: 1 1 auto;}<p>Problem: The icons overflow the parent, despite being told to shrink if necessary with `flex-shrink: 1`. I have tried `flex-basis: 0` and a few other things.</p><div class="parent"><p>This is the parent, with flex-direction: column. The following icons ought to appear within this parent and not overflow it.</p><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>I normally do fine with the default flex-direction: row but often get caught out with flex-direction: column. What am I missing?