flex-wrap changes behavior of gap?

Question

Here's something I don't understand about gap. I created a 4 column layout using flex-basis: 25%;. I need flex-basis because in some situations, only 3 columns exist. I also added gap: 10px; and it all works perfectly well:

.flex {
  width: 300px;
  border: 2px solid green;
  display: flex;
  gap: 10px;
}

.child {
  height: 40px;
  background: orange;
  flex-basis: 25%;
}

<div class="flex">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

However, I'd like the columns to wrap if their content exceeds that 25% width. But as soon as I add the flex-wrap: wrap; property, it wraps! Why? There's no need to! I only want the CSS to wrap if needed.

.flex {
  width: 300px;
  border: 2px solid green;
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* <-- this! */
}

.child {
  height: 40px;
  background: orange;
  flex-basis: 25%;
}

<div class="flex">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Could someone explain to me...

1. why this isn't faulty browser behavior
2. how to fix it?