How to make a scrollable section inside div that fills in all the remaining space of said div

Question

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>

Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — bigless, Nov 30 '21 at 00:44
In your case, add height: 100vh; to .scrollable-div and it will occupy the rest of the window regardless of its size. — GLAPPs Mobile, Nov 30 '21 at 01:28
@bigless it does not I'm afraid. If it weren't for the need to scroll, this would not be a problem. — theJuls, Nov 30 '21 at 03:03
@GLAPPsMobile yes it will, however a bunch of the items on the list are now inaccessible as the scroll does not go all the way down. — theJuls, Nov 30 '21 at 03:04

Authentic Science · Accepted Answer · 2021-11-30T03:37:59.753

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>

Hum... But that is not scrollable. When running on fullscreen, it just expands the whole scrollable-div area. And on smaller screens, it is shrunk enough that it shows nothing. — theJuls, Nov 30 '21 at 03:06
Are you sure? Take a look at the screen recording when I 'run snippet' and then 'full page' and size browser...https://streamable.com/nd1dyy — Authentic Science, Nov 30 '21 at 03:30
I think you clicked 'expand snippet' and then 'run code snippet'...that would not display properly....I should have clarified....click 'Run snippet', and then click 'full page' and it should work as expected. — Authentic Science, Nov 30 '21 at 03:39
Weird that it didn't work when running the snippet normally. Indeed that does the job. THanks! — theJuls, Nov 30 '21 at 17:40

How to make a scrollable section inside div that fills in all the remaining space of said div

1 Answers1