Flex equal height column but respect max height of another column

How does I make the below code work just with CSS (flex) and without Javascript, the second column have dynamic list of content for which I need to apply scroll bar depending upon the height of first column.

HTML

<div class="row d-flex">
  <div class="col-lg-6 mx-200">
    <img class="img-responsive" src="lorem.jpg"/>
  </div>
  <div class="col-lg-6 respect-left-col-height of-a">
    <ul>
      <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
    </ul>
  </div>
</div>

STYLE

<style>
  .mx-200 {
    max-height: 200px;
  }

  .of-h {
    overflow: auto
  }
</style>