I'm struggling to make Bootstrap/Flexbox work smoothly within a height restriction.
In my design, I have a <main> element with a set height. In the application itself, this height is calculated so that the footer aligns perfectly at the bottom of the screen. For demonstration purposes, it's fixed at 500px.
I aim to place user data of varying lengths (ranging from 1 line to potentially up to 1000 lines based on API response) in a card. This card should be limited by the height of its container, with an internal scrollbar to navigate through its content. However, the card-body seems determined to expand indefinitely to accommodate all contents - I can't seem to constrain any part of the structure by the 500px height defined on the <main> element.
Here's a simplified illustration. The dark bar represents the footer, correctly positioned below the 500px <main> element. The card extends far beyond it - what I desire is for the card to stay within the top and bottom boundaries of the page while enabling scrolling inside the card to view its contents.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Manage List</title>
</head>
<body>
<main style="height: 500px">
<div class="container-fluid">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row">
<div class="col-7">
<div class="card">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
<!-- User data here -->
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
</body>
</html>References to similar questions:
When flexbox items wrap in column mode, container does not grow its width
Prevent flex item from exceeding parent height and make scroll bar work
Why don't flex items shrink past content size?
white-space css property is creating issues with flex
Fitting child into parent
Flex item is not shrinking smaller than its content
I've experimented with adding min-height: 0 everywhere, using flex-shrink: 1, flex-grow: 0, as well as following other tips from the mentioned questions. I'm running out of ideas except perhaps manually setting the height of each element along the hierarchy using height: 100% to ensure nothing surpasses the constraints of <main>...