I have a div with a bunch of different sections, one of which is a scrollable list within the div.
The scrollable area varies depending on the screen size and needs to occupy all the remaining space of the parent. So far, I only know how to make it scroll if I specify the scrollable div's height. This of course, will not have a once size fits all when dealing with different screen sizes.
If I alternatively set my scrollable div's height to 100%, I then of course lose my ability to scroll. So that's no good either.
How can I solve this?
Here is a sample app illustrating the problem:
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>Run snippet, and click 'full page' then scale browser and scrolling area should be dynamic in height. Only tested in Chrome btw.
const App = () => {
return (
<div className="container">
<div className="inner">
<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 {
display: flex;
flex-direction: column;
border: 2px solid #2B3239;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.inner {
padding: 12px;
background: #EFF2F5;
min-height: 0;
display: flex;
flex-direction: column;
}
.scrollable-div {
background: white;
border: 2px solid #FF6F6F;
flex-grow: 1;
overflow: scroll;
padding: 12px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>