One of the sections in my div is a scrollable list that needs to adjust its size dynamically based on the screen size.
I am struggling with finding a solution that allows the scrollable area to occupy all the remaining space of the parent without specifying a fixed height. If I set the height to 100%, I lose the ability to scroll, and if I specify a fixed height, it won't be responsive to different screen sizes.
How can I make the scrollable section fill in the rest of the space within the parent div?
Below is an example code snippet illustrating the issue:
const App = () => {
return (
<div className="container">
<div>
<h2>My Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h3>Scrollable section that must fill in the rest of the space</h3>
<div className="scrollable-div">
{[...Array(50).keys()].map((_, index) => (
<div>item {index}</div>
))}
</div>
</div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('app')
);.container {
height: 500px;
border: 2px solid black;
overflow: hidden;
}
.scrollable-div {
overflow: auto;
border: 3px solid red;
/*
this all works fine, but I need the scroll section to go all the way to the end of the parent div,
regardless of the screen size. How can I do this without setting a fixed height here?
*/
height: 250px;
/*
the alternative, which would allow this div to expand all the way down to the reminder of the parent
is set height to 100%, however then I lose my ability to scroll.
*/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>