Extend container to match height of content when inside full-screen, fixed overlay

Question

I have a full-screen overlay (using position: fixed; inset: 0) which contains 3 columns. The content of any of these columns could potentially be very long and may result in the column being taller than the height of the viewport. In this scenario I'd like the whole overlay content to scroll vertically.

The problem I'm having is that the background colour of the columns is only applied to the area which initially falls within the viewport, so when you scroll down the overflowing content isn't set on a background. I'd like the background of all three columns to extend down so it matches the full height of the tallest column.

The code is as follows:

* {
  margin: 0;
  padding: 0;
}
.overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
}
.overlay__col {
  width: 33.333333%;
  padding: 30px;
}
.overlay__col--1 {
  background-color: #aaa;
}
.overlay__col--2 {
  background-color: #bbb;
}
.overlay__col--3 {
  background-color: #ccc;
}

<div class="overlay">
  <div class="overlay__col overlay__col--1">
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
    <p>Really long content</p>
  </div>
  <div class="overlay__col overlay__col--2">
    <p>Col 2</p>    
  </div>
  <div class="overlay__col overlay__col--3">
    <p>Col 3</p>
  </div>
</div>

One idea was to wrap the content of each column in a wrapper element and set the background colour on that instead of the column. This works, but only for the tallest column - the other columns again truncate at the height of the viewport.

I can kind of see why this is happening but can't think how to overcome it without resorting to using JavaScript to match the column heights. I don't want to resort to hacking the background colours so that they're set on the overlay element rather than the individual columns.

Many thanks.