我在将一列的高度限制为另一列高度时遇到问题。解释一下：我有一列(类：列表(包含找到的项目列表 - 也许它是一个元素，也许是 10 或 20。第二列是所选项目的描述 - 但我不知道确切的高度 - 这取决于分辨率、外部数据等。
我想将左列的高度设置为第二列的高度。当第一列较大时，我想添加滚动条以显示其他项目。
.list {
background: #f77;
overflow: auto;
}
.content {
background: #ccc;
height: fit-content;
padding-bottom: 10px;
padding-top: 10px;
}
li {
height: 40px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>bootstrap 4 column height</title>
</head>
<body>
<div class="container py-2">
<div class="row">
<div class="col-md-4 list">
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
<li>element 5</li>
<li>element 6</li>
<li>element 7</li>
<li>element 8</li>
<li>element 9</li>
<li>element 10</li>
<li>element 11</li>
<li>element 12</li>
</ul>
</div>
<div class="col-md-6 content">
<div style="height: 400px; background: #eee">
variable height content
</div>
</div>
</div>
</div>
</body>
</html>列添加类d-flex，
<div class="col-md-4 d-flex">
- 弹性框高度用于均衡。
- 在
.box类中添加width: 100%您可以调整宽度。
例如，https://codepen.io/yasinatesim/pen/NJgvYX