Flex item is stretched by Chrome to fill cross axis but not by Firefox

The markup and styling given at the end of this description produce different views in Chrome and Firefox (as the following snapshot shows).

Chrome stretches the image inside cancel-icon div to take full height of the parent but Firefox keeps the image at original height. To keep things consistent i had to specify image width (commented lines in the styling code below).

.content-wrapper {
  display: flex;
  border: 1px solid #DA291F;
  height: 40px;

  .timer-text {
    display: flex;
    align-items: center;
    color: #313131;
    padding: 0 5px;
  }
  .cancel-icon {
    display: flex;
    padding: 0 5px;
    // img {
    //   width: 20px;
    // }
  }
}

<div class="content-wrapper">
  <div class="timer-text">
    <div>00:00:00</div>
  </div>
  <div
    class="cancel-icon">
    <img src="https://svgshare.com/i/mmR.svg">
  </div>
</div>

Here is the fiddle link: https://jsfiddle.net/u0xsv7fo/