Scroll an element that's deeply below an ancestor that knows its height

Question

I have something like the following:

#page {
  height: 200px; /* just for illustration, would be 100vh */
  border: 1px solid black; /* just for illustration */
  
  display: flex;
  flex-direction: column;
}

#nav {
  height: 30px;
  background-color: lightBlue;
  
  flex: none;
}

#content {
  background-color: lightGreen;
  display: flex;
  
  flex: 1 1 auto;
}

section {
  flex: 1 1 50%;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

.problem {
  color: white;
  background-color: red;
  height: 500px;
  overflow-y: auto;
}

<div id="page">
  <div id="nav">
    I'm a nav bar!
  </div>
  <div id="content">
    <section>
      Stuff
    </section>
    <section>
      More stuff
      <div class="problem">
        Oh no I'm huge and should scroll vertically
      </div>
    </section>
  </div>
</div>

I want the page to never scroll, and I only want the large red rectangle to scroll within the <section>. What rules do I need to add so that the red rectangle understands its parent's bounds?

`min-height: 0;` to #content – Temani Afif Mar 18 '20 at 10:00 — Temani Afif, Mar 18 '20 at 10:00

Wax · Accepted Answer · 2020-03-18T03:55:56.547

You can make your section a flexbox container and then set the flex CSS property (short for flex-grow, flex-shrink, and flex-basis)

You want it to spread or shrink to occupy to all the remaining height => flex-grow: 1; and flex-shrink: 1;

Explanation for the flex-basis (from this answer):

The flex-basis factor

When flex-basis is 0, flex-grow ignores the size of the content in flex items and treats all space on the line as free space.

This is absolute sizing. All space on the line is distributed.

It's what we need here => flex-basis: 0;

Here what's the code will look like:

section {
  flex: 1 1 50%;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex; /* added */
  flex-direction:column; /* added */
}

.problem {
  color: white;
  background-color: red;
  overflow-y: auto;
  flex: 1 1 0; /* added */
}

#page {
  height: 100vh; /* just for illustration, would be 100vh */
  border: 1px solid black; /* just for illustration */
  
  display: flex;
  flex-direction: column;
}

#nav {
  height: 30px;
  background-color: lightBlue;
  
  flex: none;
}

#content {
  background-color: lightGreen;
  display: flex;
  
  flex: 1 1 auto;
}

section {
  flex: 1 1 50%;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  flex-direction:column;
}

.problem {
  color: white;
  background-color: red;
  overflow-y: auto;
  flex: 1 1 0;
}

<div id="page">
  <div id="nav">
    I'm a nav bar!
  </div>
  <div id="content">
    <section>
      Stuff
    </section>
    <section>
      More stuff
      <div class="problem">
        Oh no I'm huge and should scroll vertically
      </div>
    </section>
  </div>
</div>

If you add more content in your div.problem, it will have the expected behavior

#page {
  height: 100vh; /* just for illustration, would be 100vh */
  border: 1px solid black; /* just for illustration */
  
  display: flex;
  flex-direction: column;
}

#nav {
  height: 30px;
  background-color: lightBlue;
  
  flex: none;
}

#content {
  background-color: lightGreen;
  display: flex;
  
  flex: 1 1 auto;
}

section {
  flex: 1 1 50%;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  flex-direction:column;
}

.problem {
  color: white;
  background-color: red;
  overflow-y: auto;
  flex: 1 1 0;
}

<div id="page">
  <div id="nav">
    I'm a nav bar!
  </div>
  <div id="content">
    <section>
      Stuff
    </section>
    <section>
      More stuff
      <div class="problem">
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically         
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically         
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
        Oh no I'm huge and should scroll vertically
      </div>
    </section>
  </div>
</div>

score 0 · Answer 2 · answered Mar 18 '20 at 03:14

#page {
  height: 200px; /* just for illustration, would be 100vh */
  border: 1px solid black; /* just for illustration */
  display: flex;
  flex-direction: column;
}

#nav {
  height: 30px;
  background-color: lightBlue;
  flex: 0 0 auto;
}

#content {
  background-color: lightGreen;
  display: flex;
  overflow: hidden;
}

section {
  flex: 1 1 50%;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  overflow-y: auto;
}

.problem {
  color: white;
  background-color: red;
  height: 500px;
}

Scroll an element that's deeply below an ancestor that knows its height

2 Answers2