I have a flexbox of three square images, which I want to adjust to the size of the browser window as I narrow or widen it. I’ve managed to do this. However, I would like each image to be a link. When I try to do this, the images don’t grow or shrink anymore.

This is the code where the images are not links, and the pictures resize as I want them to:

HTML:

<div class="container">

  <img src="001.jpg">
  <img src="002.jpg">
  <img src="003.jpg">

</div>

CSS:

.container {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.container img {
  overflow: hidden;
  flex: 1 1 400px
}

I’ve tried for instance:

<a href="website.html"><img src="001.jpg"></a>

And change second part of the CSS to

.container a

instead of

.container img

But this, or other solutions that I’ve tried don’t work, as the images don’t grow or shrink when I change the window size.