Как сделать так, чтобы изображение во flexbox внутри сетки занимало 100% высоты

Question

У меня есть grid, внутри моего grid У меня есть «ячейка», которая установлена ​​на display:flex; Я хотел бы сделать так, чтобы изображение, которое находится на левой стороне этой ячейки, получалодо 100% высоты контейнера и пропорционально масштабировать ширину.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border: 1px solid black;
}

.grid>div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid>div img {
  /* image should be 100% height of cont */
  height: 100%;
  width: auto;
}

.cell-content {
  padding: 30px;
}

<div class="grid">
  <div>
    <img src="http://placehold.it/300x350" />
    <div class="cell-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum curabitur vitae nunc sed. Venenatis tellus in metus vulputate eu scelerisque felis. Hac habitasse platea dictumst
        quisque sagittis purus sit amet. Morbi enim nunc faucibus a. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Ac placerat vestibulum lectus mauris. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Viverra
        tellus in hac habitasse platea dictumst. Turpis egestas integer eget aliquet nibh praesent tristique magna sit.</p>
    </div>
  </div>
</div>

Я даже не уверен, что grid часть этого макета имеет значение в этом случае, но я на всякий случай воссоздал свернутую версию моей сетки. По сути, я хочу, чтобы изображение касалось верхней и нижней части границы и пропорционально увеличивало ширину изображения. Прямо сейчас есть небольшое расстояние выше и ниже изображения.