Make flexbox item limited by image size with retained image proportions?

Question

I have flex box items that contain both an image part and a text part, both with 50% width. I want the height of the items to be limited by the height of the images and the images to retain their aspect ratios.

As you can see in the code pen:

• The images do retain their square aspect ratios (good)
• There are a few pixels beneath the image of each flexbox item (bad). I want this space to disappear. Is this possible?

HTML

<div class="flex-container">
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
</div>

CSS

.flex-container {
  width: 600px;
  background-color: gray;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  display: flex;
}

.inner-flex-container {
  width: 50%;
}

.image, .text {
  display: inline-block
}

.image {
  height: auto;
  max-width: 50%
}

Code pen

https://codepen.io/anon/pen/geozyK