Flex equal height column but respect max height of another column

Question

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>

Answer 1

You could absolute position the list.

ul {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
}

https://www.codeply.com/go/v6JEmLN72s

Answer 2

pretty sure you can't do that with just CSS . getting the dinamic height of the left col and assign it to the right col.

you can only use fixed height values. like in the example below jsFIddle

.of-h {
  overflow-y: scroll
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.col-lg-6 {
  border: 1px solid red;
  max-height: 200px;
}

<div class="row row-eq-height">
  <div class="col-lg-6 mx-200">
    <img class="img-responsive" src="http://placehold.it/350x150">
  </div>
  <div class="col-lg-6 respect-left-col-height of-h">
    <ul>
      <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
     <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
     <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
     <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
     <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
     <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
    </ul>
  </div>
</div>