CSS causes issues when <a> tag meets <img> tag. Help please

[Polleke]

On a product page we display a row of icons, looking like this:

It's basically a list of <IMG> tags (wrapped in a conditional loop, which I leave out here to stay focussed).

<img alt="Suited for Afro Hair" src="{{ 'feat-afro.svg' | asset_url }}" style="max-height: 70px" />
<img alt="Suited for all hair types" src="{{ 'feat-all-hair-types.svg' | asset_url }}" style="max-height: 70px" />

To handle the styling, we use this CSS (without css, the icons do not appear next to each other, but each on a new line)

.feature-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5em;
  row-gap: 10px;
}

It's relatively easy to make the icon interactive, in this case: link the to a filtered collection page with all similar products.

<a href="/collections/hair-care?filter.p.m.custom.hair_types=Afro">
<img alt="Suited for all hair types" src="{{ 'feat-afro.svg' | asset_url }}" style="max-height: 70px" />
</a>

However, as soon as we add the CSS, the icons do not appear anymore.

Yet, if we replace the <img> with a simple text tag, it works again.
So something in the CSS doesn't work well with <a> & <img> tags combined.

Any suggestions?

[Verdant-Spark · Accepted solution]

The flexbox on the parent element is now just flexing the anchor elements, as the image elements are now inside those. You're also setting max height on the image elements but not height, so the images will still be there but may just have zero height. Try adding the following to your style:

.feature-icons a img{
  height: 70px;
  width: auto;
}

It might also help to see the actual page in case there are other styles overruling what you have here - stand along snippets can be a bit misleading.

[Polleke]

Exactly the suggestion I was looking for! I just tested it, and it works like a charm. 
Thanks!
Updating the production code now, another happy merchant tomorrow.
See final result at https://www.hairgang.com.au/collections/hair-care/products/eco-lab-firm-hold-hair-spray

(It's holiday season, so my coder is on a three week leave. Yet, didn't want to let the merchant wait till he's back. I thought my limited liquid and html skills would be enough. Now I know I need a crash course CSS 😉