I am currently working on a React project, and one of the pages includes a left sidebar that takes up 3 column spaces in the container.
The main content of the page occupies the remaining width, using an additional 8 columns.
The sidebar contains only 7-8 links, and the main content is limited to 8 columns in height. My goal is for the main content to fill up the empty space under the sidebar when its height drops below that of the sidebar, rather than continuing straight down with whitespace beneath the sidebar.
I created a mock HTML code snippet in this jsfiddle. What I need is for the main content to expand and take up the excess container space, including the area underneath the sidebar as shown in this image (please excuse the rough layout edited using Photoshop).
I have spent roughly 2 hours searching for a solution but have been unable to find one, or perhaps I am not articulating my requirements effectively.
Code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>;
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.4/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style>
.container {
margin-top: 50px;
}
li {
margin: 30px;
}
.main-text {
border: 3px dashed red;
padding: 20px;
}
.overflow-text {
border: 3px solid blue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 ">
<ul style="border: 2px solid black">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<div class="col-md-8">
<div class="main-text">
<h3>Main Content</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>
</div>
</div>
</div>
</div>
</body>