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?