Html 如果第二列溢出第一列的高度，则滚动第二列

我在Bootstrap4中创建了一行，它有两列。 左栏由两张牌组成，右栏为一张牌

左列的卡都是带有iFrame的响应嵌入，使用embed-responsive-16by9类

右栏是一张简单的卡片，上面有一个要点列表。我希望右边的列与最左边的列的总高度100%匹配，如果项目符号列表过长，则使用scroll溢出

我花了好几个小时玩Flexbox和overflows以及各种各样的东西，只是无法让这种行为起作用

从下面的代码中，您可以看到#chatItems div从javascript代码中添加了新的项

当文件作为附件时，随着chatItem列表项数的增加，整行变为右侧列的高度，并且不会开始滚动

视频播放器
视频播放器
聊天项目

第一项

这个……怎么样

我已经添加了一些自定义css到您的聊天卡来处理溢出滚动

.overflow-y-scroll

类在引导程序中不存在，我可以告诉您

在我的示例中，我将

.col-

类设置为每个屏幕大小，因此演示将在这里进行

我给了你的聊天卡一个最小300像素的高度，以防你在手机上观看，它的父栏是100%。你当然要改变这个

请参阅下面的演示和一个JSFIDLE

.card聊天{
最小高度：300px；
高度：计算（100%-1.5雷姆）；
}
.卡片聊天.卡片正文{
溢出：隐藏；
位置：相对位置；
}
.卡片聊天.卡片正文.列表组{
顶部：-1px；
右：-1px；
左：-1px；
底部：-1px；
字号：80%；
位置：绝对位置；
溢出-x：滚动；
}
.card chat.card body.list组项目：第一个孩子，
.card chat.card body.list组项：最后一个子项{
边界半径：0！重要；
}
.卡视频.卡体{
填充：0；
溢出：隐藏；
}

视频播放器
视频播放器
聊天项目

Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭
Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭
Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭
Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

您好，请提供您遇到问题的代码，以便我们帮助您。您好-我添加了这个！：）@bh00s我的解决方案如何？

<div class="row pt-3">
<div class="col-md-9">

   <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
            </div>  
          
            <div class="card-body embed-responsive embed-responsive-16by9">         
                <iframe src="https://player.vimeo.com/video/12345567895?autoplay=1&loop=1&autopause=0" width="100%" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>              
            </div>
        </div>
    </div>
      
    <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
            </div>
        
            <div class="card-body embed-responsive embed-responsive-16by9">         
                <iframe src="https://player.vimeo.com/video/12345567896?autoplay=1&loop=1&autopause=0" width="100%" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>              
            </div>
        </div>
    </div>
</div>

<div class="col-md-3 ">
  <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal text-left text-uppercase">Chat Items</h4>
            </div>
        
            <div class="card-body p-0 overflow-y-scroll" id="chatItems">            
                <ul>
                    <li>First Item</li>
                </ul>
            </div>
        </div>
    </div>
</div>