Horizontal Two-Cell Layout with 16:9 Left Cell and Vertical-Scrolling Right Cell

Please see this illustration:

I have a left 16x9 area for videos that resizes its width and height automatically for videos. This works. It's about 75% of the width of the container of both the left and right elements. (This container is somewhere on the page but is not the full width of the page.)

To the right of that, I want a sidebar that scrolls. The sidebar should never exceed the height of the left side. It should just scroll.

Here's a basic reproduction snippet. When running the snippet, you might want to use the "Full Page" option.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            border: 1px solid black;
            padding: 5px;
        }
        .videoOuter {
            width: 75%;
            flex: 1 0 auto;
            border: 1px solid red;
            padding: 5px;
        }
        .responsiveRatioOuter {
            position: relative;
            padding-top: 56.25%;
            border: 1px solid lime;
        }
        .sidebar {
            border: 1px solid blue;
            overflow: auto;
            min-height: min-content;
        }
        .sidebarStatement {
            font-size: 50px;
        }
        .sidebarFakeContent {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="videoOuter">
            <div class="responsiveRatioOuter">
                Video 16x9 &lt;iframe&gt; goes here.  This part works.
            </div>
        </div>
        <div class="sidebar">
            <div class="sidebarStatement">I want this to scroll while matching the height of the left video area (lime border), but this doesn't scroll.  It just makes .videoOuter (red border) and .container (black border)  expand.</div>
            <div class="sidebarFakeContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        </div>
    </div>
</body>
</html>

To accomplish what I want, I've tried display: flex and display: grid. I haven't gotten the sidebar to scroll properly. Can someone advise me on how to make the right item no taller than the left one and allow scrolling? Thank you.

Solution

Add an extra sidebar-wrapper div should do the trick, along with CSS Grid and position absolute.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            border: 1px solid black;
            padding: 5px;

            display: grid;
            grid-template-columns: 7.5fr 2.5fr;
        }
        .videoOuter {
            /*width: 75%;
            flex: 1 0 auto;*/
            border: 1px solid red;
            padding: 5px;
        }
        .responsiveRatioOuter {
            position: relative;
            padding-top: 56.25%;
            border: 1px solid lime;
        }
        .sidebar {
            border: 1px solid blue;
            /*overflow: auto;
            min-height: min-content;*/
            position: relative;
        }
        .sidebar-wrapper {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          overflow: auto;
        }

        .sidebarStatement {
            font-size: 50px;
        }
        .sidebarFakeContent {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="videoOuter">
            <div class="responsiveRatioOuter">
                Video 16x9 &lt;iframe&gt; goes here.  This part works.
            </div>
        </div>
        <div class="sidebar">
          <div class="sidebar-wrapper">
            <div class="sidebarStatement">I want this to scroll while matching the height of the left video area (lime border), but this doesn't scroll.  It just makes .videoOuter (red border) and .container (black border)  expand.</div>
            <div class="sidebarFakeContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
          </div>
        </div>
    </div>
</body>
</html>