Can you have a scrolling div which matches the height of a dynamically-sized sibling?

Question

I have two divs side-by-side in a flex row and would like to know whether it is possible, using just CSS, to make the left div (A) always match the height of the right div (B). The right-hand div (B) is of dynamic height and I cannot specify an exact height in CSS. For content overflowing in A, there should be a scrollbar. I want to avoid using JS, if possible. Not sure if this is doable using flex? This should be doable using tables (as per the bottom code snippet) but I would like to avoid that as it isn't semantically correct.

Using flex

.container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.container .a {
  border: 1px solid red;
  flex: 1;
}

.container .b {
  border: 1px solid green;
  flex: 1;
}

<div class="container">
  <div class="a">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
      <li>Nunc dignissim risus id metus.</li>
      <li>Cras ornare tristique elit.</li>
      <li>Vivamus vestibulum ntulla nec ante.</li>
      <li>Praesent placerat risus quis eros.</li>
    </ul>
  </div>
  <div class="b">
    Text 1<br />
    Text 2<br />
    Text 3
  </div>
</div>

Using tables

.container {
  height: 100%;
  display: table;
}

.container .row {
  display: table-row;
}

.container .a {
  border: 1px solid red;
  display: table-cell;
  width: 50%;
}

.container .a>div {
  height: 100%;
  overflow: auto;
}

.container .b {
  border: 1px solid green;
  display: table-cell;
  vertical-align: top;
}

<div class="container">
  <div class="row">
    <div class="a">
      <div>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Nunc dignissim risus id metus.</li>
          <li>Cras ornare tristique elit.</li>
          <li>Vivamus vestibulum ntulla nec ante.</li>
          <li>Praesent placerat risus quis eros.</li>
        </ul>
      </div>
    </div>
    <div class="b">
      Text 1<br />
      Text 2<br />
      Text 3
    </div>
  </div>
</div>