我有一个react项目正在进行中，其中一个页面在左侧有一个侧边栏，占用了容器的3列空间。
我有剩下的宽度的页面使用8列的主要内容。
侧边栏只有7-8个链接。页面的主要内容仅占8列的高度。我需要的是，当主要内容的高度下降下的侧边栏，内容将填补剩余的空白下的侧边栏，而不是继续直接向下的空白下的侧边栏。
我在jsfiddle中创建了一个虚拟的html代码。我需要的是主要内容，以占用剩余的容器空间，包括在侧边栏下面，就像这个图像。(图片使用photoshop编辑，抱歉布局不好)
我搜索了大约2个小时，找不到答案，或者可能我不知道如何表达我正在寻找的东西。
代码:
<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.0.0-beta2/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. In tempora libero
placeat culpa nostrum dignissimos deserunt nisi dolorum dolore repudiandae necessitatibus
numquam architecto laudantium, asperiores, tenetur exercitationem molestias quo explicabo
officia sequi ad. Qui fugiat praesentium reiciendis nulla officia, debitis eveniet,
reprehenderit id nisi assumenda, nemo perferendis corporis magnam! Voluptatem nam sapiente,
tempore molestiae aspernatur voluptatibus impedit! Omnis facilis ut, vel rerum doloremque,
sunt
consequatur quaerat eligendi soluta, ratione accusantium hic saepe officia maiores enim
voluptate id? Neque, enim ipsam rerum, praesentium, autem eaque similique voluptas ratione
culpa
impedit harum dolor consequatur voluptatem eveniet nesciunt itaque doloremque aperiam
repellat
facilis incidunt atque animi voluptatum ex! Adipisci vitae autem deserunt vero porro amet
modi
omnis quidem aliquam tempore sit cupiditate eos obcaecati nostrum reprehenderit, harum
fugiat!
Est fugit expedita exercitationem mollitia nulla nemo iure esse deserunt! Nostrum laboriosam
doloribus molestiae qui aut excepturi, impedit nulla quam sint quisquam veritatis id
expedita,
velit dolores voluptates quos ipsam tempore nihil consectetur repudiandae. Cum recusandae
laboriosam facere numquam laudantium! Unde deleniti delectus facilis, quaerat dolorem quas
pariatur repellat. Unde voluptatibus atque aliquid amet, eaque hic dicta facere vitae eius?
Tempora hic pariatur vel reiciendis vitae, rerum necessitatibus repellendus, culpa
perspiciatis
maxime voluptatibus. In error reiciendis, aliquid illo aperiam, magnam optio ipsam, ratione
quam
perspiciatis dolorum minima repellat possimus quod dolore ea? Ea inventore perspiciatis esse
est
cum fuga praesentium sed, eum totam dolor quas accusamus iusto aperiam veritatis id, culpa
neque
omnis mollitia nostrum repudiandae, optio sit explicabo accusantium illo. Suscipit libero
distinctio rem quas non eveniet recusandae! Ipsum tempora cumque deserunt, perferendis
eligendi
nisi accusantium fugiat exercitationem rem qui expedita labore quam ea quasi voluptatum et
eos
alias atque, consequuntur repellat vero! Incidunt, reprehenderit cupiditate at, deserunt
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis fugiat omnis sequi
pariatur. Accusantium odit aut error. Iusto quos modi temporibus, libero minus, laboriosam
veritatis dignissimos laborum ullam ea pariatur nihil blanditiis nobis sapiente doloremque
illo explicabo! Sapiente quaerat iure dignissimos, deserunt illum delectus aperiam accusamus
accusantium adipisci libero eveniet.
</p>
</div>
</div>
</div>
</div>
</body>
我不确定你是否可以把你的链接放在一列，文本放在另一列，但你可以把它们放在单独的分区，然后浮动链接div为更大的显示
.container {
margin-top: 50px;
}
li {
margin: 30px;
}
.main-text {
border: 3px dashed red;
padding: 20px;
}
.overflow-text {
border: 3px solid blue;
padding: 20px;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="float-md-start me-md-3">
<ul class="mb-1" style="border: 2px solid black">
<li><a href="https://google.com">List item</a></li>
<li><a href="https://google.com">List item</a></li>
<li><a href="https://google.com">List item</a></li>
<li><a href="https://google.com">List item</a></li>
<li><a href="https://google.com">List item</a></li>
<li><a href="https://google.com">List item</a></li>
<li><a href="https://google.com">List item</a></li>
</ul>
</div>
<div class="main-text">
<h3>Main Content</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In tempora libero placeat culpa nostrum dignissimos deserunt nisi dolorum dolore repudiandae necessitatibus numquam architecto laudantium, asperiores, tenetur exercitationem molestias quo explicabo officia sequi ad. Qui fugiat praesentium reiciendis nulla officia, debitis eveniet, reprehenderit id nisi assumenda, nemo perferendis corporis magnam! Voluptatem nam sapiente, tempore molestiae aspernatur voluptatibus impedit! Omnis facilis ut, vel rerum doloremque, sunt consequatur quaerat eligendi soluta, ratione accusantium hic saepe officia maiores enim voluptate id? Neque, enim ipsam rerum, praesentium, autem eaque similique voluptas ratione culpa impedit harum dolor consequatur voluptatem eveniet nesciunt itaque doloremque aperiam repellat facilis incidunt atque animi voluptatum ex! Adipisci vitae autem deserunt vero porro amet modi omnis quidem aliquam tempore sit cupiditate eos obcaecati nostrum reprehenderit, harum fugiat! Est fugit expedita exercitationem mollitia nulla nemo iure esse deserunt! Nostrum laboriosam doloribus molestiae qui aut excepturi, impedit nulla quam sint quisquam veritatis id expedita, velit dolores voluptates quos ipsam tempore nihil consectetur repudiandae. Cum recusandae laboriosam facere numquam laudantium! Unde deleniti delectus facilis, quaerat dolorem quas pariatur repellat. Unde voluptatibus atque aliquid amet, eaque hic dicta facere vitae eius? Tempora hic pariatur vel reiciendis vitae, rerum necessitatibus repellendus, culpa perspiciatis maxime voluptatibus. In error reiciendis, aliquid illo aperiam, magnam optio ipsam, ratione quam perspiciatis dolorum minima repellat possimus quod dolore ea? Ea inventore perspiciatis esse est cum fuga praesentium sed, eum totam dolor quas accusamus iusto aperiam veritatis id, culpa neque omnis mollitia nostrum repudiandae, optio sit explicabo accusantium illo. Suscipit libero distinctio rem quas non eveniet recusandae! Ipsum tempora cumque deserunt, perferendis eligendi nisi accusantium fugiat exercitationem rem qui expedita labore quam ea quasi voluptatum et eos alias atque, consequuntur repellat vero! Incidunt, reprehenderit cupiditate at, deserunt Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis fugiat omnis sequi pariatur. Accusantium odit aut error. Iusto quos modi temporibus, libero minus, laboriosam veritatis dignissimos laborum ullam ea pariatur nihil blanditiis nobis sapiente doloremque illo explicabo! Sapiente quaerat iure dignissimos, deserunt illum delectus aperiam accusamus accusantium adipisci libero eveniet.
</p>
</div>
</div>
</div>
</div>