Flexbox anchor tag wrapping an image has huge width

Question

When I wrap my images in an anchor tag, the anchor tag gets a huge width. Here's the pen so you can see it: Codepen link .

Here's the HTML:

<div class="gallery">
    <a href="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png"><img src="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png" alt="Photo 1 of three dangerous ninjas"></a>
    <a href="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png"><img src="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png" alt="Photo 2 of three dangerous ninjas"></a>
    <a href="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png"><img src="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png" alt="Photo 1 of two dangerous ninjas"></a>
</div>

Here's the CSS:

.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-height: 100%;
    justify-content: space-around;
}

.gallery a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.gallery img {
    max-width: 15%;
    margin: 10px;
    border: 3px solid #000000;
    box-shadow: 3px 3px 3px #22211D; 
}

The images appear as expected without issue in the flex container if they're just images. But when I wrap them in an anchor tag, they get this huge width and I can't figure out how to fix it. If I set a width to the anchor, it keeps the aspect ratio of anchor's CSS box, so the images end up like 10 pixels wide. I'm completely lost.

Answer 1

I think you should change the way to resize your images. If you remove the max-width of ".gallery img" and replace by a simple width at 300px for example, it works fine :)

Take a look here : https://codepen.io/benCat/pen/LJvXZw?editors=1100

.gallery img {
    width: 300px;
    margin: 10px;
    border: 3px solid #000000;
    box-shadow: 3px 3px 3px #22211D; 
}