Flex gap and flex wrap with percentages

Question

I am constructing a form where the field's width percentage is dynamically set by clients. My first approach was to create a flex container with wrapping enabled and space the fields evenly using gap: 16px. To my surprise, flex-wrap and gap don't behave as I would expect.

main {
  width: 400px;
  background-color: gray;
  
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

div {
  background-color: blue;
}

.first {
  width: 50%;
}

.second {
  width: 50%;
}

<main>
  <div class="first">First</div>
  <div class="second">Second</div>
</main>

I expected them to be in the same line and have the gap in-between. This happens when I remove the flex-wrap.

The only solution I found was to use calc(50% - 16px), but this is far from ideal. Maybe I'm approaching the problem wrongly?