flex box keep one gap after wrap

Question

for some unknown reason i am getting this gap between the images after the wrap

see the sample code here: https://codepen.io/mohammad-hossein-amri/pen/NEpzro

but the result i want should be like this

i tried almost everything and still the gap exist. somehow this extra space is getting added between the images after wrap

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}

ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}

ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 2.2em;
    position: relative;
}
ul li img{
    width: 100%;
   
}

a{
    margin: 0;
    padding: 0;
}

  <div>
    <ul id="flex-container">
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">

        </a>
      </li>
      
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
    </ul>
  </div>

Update

I saw others mark another question with the same answer, but that one doesn't appear in the google search because isn't related to flex. different symptoms but the same solution doesn't make questions duplicate of each other!

Answer 1

Set font-size: 0; and the whitespace-only nodes won't take any space:

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}

ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}

ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 0;
    position: relative;
}
ul li img{
    width: 100%;
   
}

a{
    margin: 0;
    padding: 0;
}

  <div>
    <ul id="flex-container">
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">

        </a>
      </li>
      
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
        </a>
      </li>
    </ul>
  </div>

Answer 2

Give a margin-bottom to each li.

ul li {
   margin-bottom: 5px;
}