Html flexbox-等高视频&x2B；播放列表

我正在制作一个视频播放列表页面，该页面有两列——主视频+元数据和播放列表

元数据（标题/作者/描述）的长度不同，播放列表也不同

我们需要考虑以下情况：

• 如果视频列长于播放列表列，则两列的高度相等（默认行为，当前有效）
• 如果播放列表列长于视频播放器列，则需要滚动播放列表列，使两列具有相同的高度
  • 这（当然）在JavaScript中是可能的，但我真的在寻找一个纯CSS解决方案

代码笔-

默认情况下CSS（更多信息请参见代码笔^）-

---

请/谢谢/你是最棒的！：）

设置

位置：相对到
.content wrapper
和：

.col.playlist{
   width:30%;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   overflow: auto;
}

设置
位置：相对到
.content wrapper
和：

.col.playlist{
   width:30%;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   overflow: auto;
}

“如果播放列表列长于视频播放器列，则播放列表列需要滚动，以便两列具有相同的高度”-为此，您必须将
.content wrapper
设置为
位置：相对
和
列。播放列表
设置为
位置：绝对
。它是如何工作的？这意味着，由于
.col.playlist
对父级是绝对的，并且给定了
溢出：auto
，因此它不能超出父级
.content包装器
。找出一个相似的


.page{
位置：相对位置；
宽度：80%；
保证金：0自动；
}
.内容包装器{
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
调整项目：灵活启动；
位置：相对位置；
}
col{
}
上校视频播放器{
宽度：70%；
填充：0.5%0；
框大小：边框框；
}
.视频播放器.视频{
高度：480px；
背景：#000；
}
.视频播放器h1{
边缘：0.01米；
}
.col.播放列表{
宽度：30%；
位置：绝对位置；
排名：0；
右：0；
底部：0；
溢出：自动；
}
.播放列表.播放列表项{
显示：块；
宽度：100%；
身高：5公分；
背景：#ccc；
边缘底部：1米；
}

视频标题
视频作者
Et YOLO独角兽旅行者。多汁的自以为是的mumblecore etsy knausgaard猪肚一条绅士街艺术屠夫quis cray yr.古吊床keffiyeh破旧别致，+1个信使袋4美元烤面包工场食品卡车sint

“如果播放列表列比视频播放器列长，则播放列表列需要滚动，以便两列具有相同的高度”-为此，您必须将
.content wrapper
设置为
位置：相对
和
列。播放列表
设置为
位置：绝对
。它是如何工作的？这意味着，由于
.col.playlist
对父级是绝对的，并且给定了
溢出：auto
，因此它不能超出父级
.content包装器
。找出一个相似的


.page{
位置：相对位置；
宽度：80%；
保证金：0自动；
}
.内容包装器{
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
调整项目：灵活启动；
位置：相对位置；
}
col{
}
上校视频播放器{
宽度：70%；
填充：0.5%0；
框大小：边框框；
}
.视频播放器.视频{
高度：480px；
背景：#000；
}
.视频播放器h1{
边缘：0.01米；
}
.col.播放列表{
宽度：30%；
位置：绝对位置；
排名：0；
右：0；
底部：0；
溢出：自动；
}
.播放列表.播放列表项{
显示：块；
宽度：100%；
身高：5公分；
背景：#ccc；
边缘底部：1米；
}

视频标题
视频作者
Et YOLO独角兽旅行者。多汁的自以为是的mumblecore etsy knausgaard猪肚一条绅士街艺术屠夫quis cray yr.古吊床keffiyeh破旧别致，+1个信使袋4美元烤面包工场食品卡车sint

的绝对位置
。playlist
将其从常规流中删除，并且父
div.content-wrapper
的高度将等于其其他子级。
的绝对位置
将其从常规流中删除，父
div.content-wrapper
的高度将等于其其他子级。