How do I correctly set flex item to 50% percent when gap is used?

Question

So it seems I misunderstand something about flexbox and can't correctly solve the issue.

I have a flexbox container that contains four columns which are flexbox container's direct children. And once browser window width reaches 992px and lower I want to change so that .flexbox-item takes 50% width of the container.

The problem:
It seems to work fine if I don't use 'gap' property on .flexbox-container but once I put gap: 1em, then percentages are not working correctly, as I understand gap is taken into account and adds up width to those .flex-item items.

The question:
How do I correctly ensure that once browser window is 992px or lower that each flexbox item takes 50% percent so I can have two columns in each row, because apparently I can play with 'width' property and give it let's say 45% and it will work, but for me it doesn't look like a correct solution. I would like to know what is the easiest way to still use those percentages correctly when 'gap' propery is used.

This is the code I have:

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1em;
}

.flexbox-item {
  width: 25%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
  .flexbox-item {
    width: 50%;
  }
}

<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

You can also see the result here: https://jsfiddle.net/Erasus/gxtvhuow/12/

Answer 1

You can try to use grid or flex either work but I would do this way. If this is what you mean Let me know.

.flexbox-container {
 display: grid;
 grid-template-columns: auto auto auto auto;
 grid-gap: 1em;
 }

.flexbox-item {
  width: 100%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexbox-container2 {
 display: flex;
 grid-gap: 1em;
 }


.flexbox-item2 {
  width: 100%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
.flexbox-container {
    display: grid;
    grid-template-columns: auto auto;
    
  }
  
.flexbox-container2 {
 display: flex;
 flex-wrap: wrap;
 grid-gap: 1em;
 }
 
 .flexbox-item2:nth-child(2n + 1),
 .flexbox-item2:nth-child(2n + 2) {
 flex: 0 0 calc(50% - 10px);
 
}
}

<h1>This is the grid way</h1>
<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

<br>

<h1>This is the flex way</h1>
<div class="flexbox-container2">
  <div class="flexbox-item2">Item 1</div>
  <div class="flexbox-item2">Item 2</div>
  <div class="flexbox-item2">Item 3</div>
  <div class="flexbox-item2">Item 4</div>
</div>