aspect ratio is not working properly inside flex container

Question

So I have a bunch of links in a flex container and want them to be squares. I've set aspect ratio for all of them of 1 / 1 and added a padding block of 1rem.

.flex {
  display: flex;
  align-items: flex-start;
}

.link {
  border: 1px solid black;
  padding-block: 1rem;
  aspect-ratio: 1 / 1;
  display: block;
  text-align: center;
}

<div class="flex">
  <a class="link" href="#">1</a>
  <a class="link" href="#">2</a>
  <a class="link" href="#">3</a>
</div>

But this isn't working the links are not squares at all. The width changes when i change the padding block, so there's something happening because of the aspect-ratio property, but the links still aren't squares.

Also, I've made some tests and when the content inside the element with aspect-ratio: 1 / 1; grows in height, the aspect ration doesn't work, the width doesn't change.

You can see these tests in a pen I created.

Is there a way i can make my links squares regardless of their contents' height?

Answer 1

If you consider the inline padding and box-sizing: border-box it should work fine.

.flex {
  display: flex;
}

.link {
  border: 1px solid black;
  padding-inline: 1rem;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

<div class="flex">
  <a class="link" href="#">1</a>
  <a class="link" href="#">2</a>
  <a class="link" href="#">3</a>
</div>