我想要实现的是让两个框的宽度相等，即左侧卡片(带有图像)的大小始终是右侧卡片与列表框的最大宽度。
所需的结果将是等宽，左侧卡片的裁剪内容有一个滚动条。
我曾尝试溢出 CSS 属性，但它们从未导致滚动条正常运行。我会为列表卡片指定一个以像素为单位的高度，并且会出现一个滚动条，但它们与左侧卡片的高度不匹配。
您可以在全屏下方查看我的示例，因为非移动 View 存在该问题。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid pt-1 pb-1" style="background: #eeeeee">
<div class="row">
<div class="col">
<h2 class="text-center h2-special-gray text-center" style="color: #444!important; font-family: 'Source Sans Pro',sans-serif; padding-top:15px;">Meetings unlike any other</h2>
</div>
</div>
<div class="container-fluid pt-4 pb-5">
<div class="row mx-lg-2 mx-sm-0">
<div class="col-md-8 col-sm-12 d-flex">
<div class="card">
<a href="my link here">
<img class="card-img-top" src="https://place-hold.it/300x100/666/fff/000.gif" alt="Card image cap">
</a>
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item px-sm-0">
<a class="nav-link active" href="my link/">WELCOME</a>
</li>
</ul>
<div class="card-body">
<p class="card-text">
<span class="lead">Here I am begin example</span> text text text text text text text text text text text text text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext
text texttext text texttext text texttext text text
</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex ">
<div class="card w-100">
<div class="card-body" style="padding-left: 0!important; padding-right: 0!important; padding-top: 0!important;">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item px-sm-0">
<a class="nav-link active text-left" href="https://meetings.cshl.edu/">UPCOMING EVENTS</a>
</li>
</ul>
<div class="position-absolute all-0 d-flex flex-column">
<ul class="list-group list-group-hover d-flex overflow-auto" style="overflow-y: auto;">
<li class="list-group-item w-100">
<a id="event1" class="lead" href="link">Specific Event Name</a>
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
<span id="" class="text-muted"></span>
<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
</li>
<li class="list-group-item w-100">
<a id="event1" class="lead" href="link">Specific Event Name</a>
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
<span id="" class="text-muted"></span>
<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
</li>
<li class="list-group-item w-100">
<a id="event1" class="lead" href="link">Specific Event Name</a>
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
<span id="" class="text-muted"></span>
<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
</li>
<li class="list-group-item w-100">
<a id="event1" class="lead" href="link">Specific Event Name</a>
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
<span id="" class="text-muted"></span>
<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
</li>
<li class="list-group-item w-100">
<a id="event1" class="lead" href="link">Specific Event Name</a>
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
<span id="" class="text-muted"></span>
<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
</li>
<li class="list-group-item w-100">
<a id="event1" class="lead" href="link">Specific Event Name</a>
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
<span id="" class="text-muted"></span>
<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
</li>
</ul>
</div>
<div class="sidebar_item">
</div>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
我能够通过在下一行添加一个 Bootstrap 实用程序类“h-100”来解决这个问题，
<div class="position-absolute all-0 d-flex flex-column w-100 h-100">
关于html - Bootstrap 中的滚动卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55162471/