The inquiry presented is a tad perplexing due to the inclusion of the .flex-grow-1 class within the .row element. Generally, this class is used to expand the height of the .row within the available space of its parent, not in terms of width. In essence, the .row should always possess a specific height for simplification purposes. Therefore, it would be beneficial to clarify whether the .row element is intended to have no fixed height.
To address this issue without a specified height, an effective solution involves incorporating a container inside the col-4 using absolute positioning:
#overflow-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: inherit;
}
This method allows the container to utilize all available space within the col-4, adjusting in size accordingly. Subsequently, the element possessing overflow: scroll functionality will perform as desired.
One drawback to this approach is that if the col-8 (or row) lacks content, resulting in no height, the #overflow-container will also lack height. Consequently, any content within the .overflow-auto element will remain unseen. Therefore, should the scenario require an empty col-8, a min-height attribute on the parent of col-4 becomes necessary.
The inclusion of padding: inherit is essential to restore the column's padding, as Bootstrap employs the selector row > * for padding column elements.
To ensure functionality on mobile screens, unnecessary classes have been removed for simplicity. However, the sm breakpoint has been added to demonstrate stacking on smaller screens. Should this functionality not be required, simply remove the -sm designation from the columns and the corresponding @media rule in the CSS. These additions are solely for illustrative purposes.
.col-sm-8 {
background: lightyellow;
}
.col-sm-4 {
background: lightgreen;
}
@media (min-width: 576px) {
#overflow-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: inherit;
}
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b362b35286469756d6434">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a978a9489c5c8d4ccc595">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<p>This column should have enough content...</p>
<br><br><br><br><br>
<p>...So `Overflowing content` will have a height.</p>
</div>
<div class="col-sm-4 position-relative">
<div class="d-flex flex-column" id="overflow-container">
<div class="">
<h5>Aside Content</h5>
</div>
<div class="">
<p>Some content here.</p>
</div>
<div class="overflow-auto">
<p>Overflowing content.</p>
<br><br><br><br><br><br><br><br><br>
<p>Unless col-8 is long enough for me to fit.</p>
</div>
<div class="">
<p>Some content here.</p>
</div>
</div>
</div>
</div>
</div>