Struggling with aligning the height of one column to match another? Let me break it down for you: I have a column (class: list) containing a list of discovered items - could be one, ten, or even twenty elements. The second column is where the description of the selected item goes, but its height isn't fixed due to various factors like resolution and external data.
I aim to make the left column's height equal to that of the second column. If the first column exceeds this height, I want to introduce a scrollbar to navigate through the additional items.
.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>