如何实现左侧16:9视频区+右侧等高滚动侧边栏的双栏布局？

请查看以下示意图：

左侧是一个16:9的视频区域，可自动调整宽高适配视频，功能正常，占左右元素容器宽度的75%（该容器非页面全宽）。希望在其右侧设置一个可滚动的侧边栏，要求侧边栏高度不超过左侧视频区，内容超出时仅滚动即可。

基础复现代码片段：

<!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>

解决方案 #

核心思路是让容器高度由左侧视频区决定，同时限制侧边栏高度与容器一致，内容超出时垂直滚动。具体修改如下：

1. 给.container添加height: fit-content，使其高度完全匹配左侧视频区的高度；
2. 调整.videoOuter的flex属性为0 0 75%，固定其宽度占比，避免伸缩打乱布局；
3. 给.sidebar设置height: 100%，使其高度与容器（即视频区）一致，并将overflow改为overflow-y: auto，仅在内容超出时显示垂直滚动条。

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            border: 1px solid black;
            padding: 5px;
            height: fit-content; /* 容器高度匹配左侧视频区 */
        }
        .videoOuter {
            flex: 0 0 75%; /* 固定宽度占比，不伸缩 */
            border: 1px solid red;
            padding: 5px;
        }
        .responsiveRatioOuter {
            position: relative;
            padding-top: 56.25%;
            border: 1px solid lime;
        }
        .sidebar {
            border: 1px solid blue;
            overflow-y: auto; /* 仅垂直滚动 */
            height: 100%; /* 高度匹配容器 */
            margin-left: 8px; /* 可选，增加侧边栏与视频区的间距 */
        }
        .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>

内容的提问来源于stack exchange，提问作者user1325179