Images with certain resolutions in grid change height on resize

Question

Certain images (depending on their resolution) decide to snap out of their height constraints on resize. All code is the same for my examples... you can see what it should look like when resizing here

However, with certain resolutions this happens

Below code is a simplified version of my problem. If you open it in full screen you will see the images come out of their div, despite having their height set to 100% - 20px....

Using the single line grid code from this post

.page {
  margin: auto 6%;
 
  border: 1px solid black;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  padding: 10px;
}

.wrapper {
  border: 1px solid black;

  width: 75%;
  height: 300px;

  overflow: visible;
}

.images {
  border: 2px solid red;
  height: 100%;
  width: 100%;
  --n: 2;
  --g: 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--n) - 1) * var(--g)) / var(--n));
  grid-gap: var(--g);
  align-items: center;
}

.images img {
  object-fit: cover;
  object-position: center;

  width: 100%;
  height: calc(100% - 20px);
}

<div class="page">
  <div class="wrapper">
    <div class="images">
      <img src="https://www.spitzer.caltech.edu/uploaded_files/images/0007/8440/sig10-13_Sm.jpg" />
      <img src="https://www.spitzer.caltech.edu/uploaded_files/images/0007/8440/sig10-13_Sm.jpg" />
    </div>
  </div>
</div>

Thanks