Flexbox align-items with overflow

Question

I am trying to put a scrolling column inside a flexbox row, such that rather than all the other columns increasing to the size of the scrolling column, the viewport of the scrolling column decreases to the size of the other columns. Basically the result of uncommenting the height of the table-column class in the following snippet, but without hardcoding the height.

Is there any way to accomplish this? I've tried various fixes around the internet, such as setting the min-height of the table-column div, but the closest I've been able to get is putting an absolute positioned div inside a relative position; but then I lose the ability for the table-column div to adjust to the width of the table.

.main-div {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 auto;
}

.first-column {
  width: 10em;
  border: 1px solid gray;
}

.table-column {
  border: 1px solid gray;
  overflow: auto;
  /*height: 55px;*/
}

.table {
  overflow: auto;
}

<div class="main-div">
  <div class="first-column">
  sodij soefijseoi alkjd seklfjns ke kjfn akl jndaka akjdn
  </div>
  <div class="table-column">
    <table class="table">
      <thead class="header">
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
      </thead>
      <tr>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
      </tr>
      <tr>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
      </tr>
      <tr>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
      </tr>
    </table>
  </div>
</div>