Element min-width only if line-break CSS

Question

I'm trying to get a layout where two links next to each other break to their min-width, if and only if there is not enough space for them to display on one line. Here you can see the elements are wider than their content:

If I set width: min-content, I get the desired result, the link elements are as wide as their content:

BUT if there's more space, they are of course still displayed like that (what I don't want):

How could I solve this? On line break case having an element width same as the actual content?

a {
  display: inline-block;
}
.min-content a {
  margin-top: 20px;
  width: min-content;
}
a:first-child {
  border: 1px solid green;
  margin-right: 10px;
}
a:last-child {
  border: 1px solid yellow;
}
.wrapper {
  width: 200px;
  bordeR: 1px solid red;
  display: flex;
  padding: 5px;
}
.long {
  width: 400px;
  margin-top: 20px;
}

<div class="wrapper">
  <a>linklink linklink 1</a>
  <a>linklink linklink 3</a>
</div>

<div class="wrapper long">
  <a>linklink linklink 1</a>
  <a>linklink linklink 3</a>
</div>
<br/><br/>
min-content:
<div class="wrapper long min-content">
  <a>linklink linklink 1</a>
  <a>linklink linklink 3</a>
</div>