How to control with css, which child item should scroll within multiple div layers?

user_7745011 0
Viewed 24

Going from this question, which already does exactly what I need (make a child fill remaining viewport size and scroll if it exceeds the remaining height), how can one extend the functionality with additional layers of <div>?

Here is some example code:

.C {
  width: 300px;
  height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.A {
  flex: 0 0 auto;
  background: #999;
  height: 150px;
}
.B {
  flex: 1 1 auto;
  background: #666;
  padding: 20px;

}
.D {
  height: 40rem;
  background: #333;
}

.X {
  background: green;
  padding: 25px;
}

.Y {
  background: red;
  padding: 25px;
}
<div class="C">
  <div class="A"></div>
  <div class="B">
    <div class="X">
      <p>some x content</p>
    </div>
    <div class="Y" >
      <p>some y content</p>
    <div class="D"></div>
    </div>
  </div>
</div>

How can I make sure, Y will scroll if the the remaining viewport size is too small for the content D, instead of one of the parent containers?

css html
1 Answers

How about giving Y class an overflow-y: auto and max-height ?

.C {
  width: 300px;
  height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.A {
  flex: 0 0 auto;
  background: #999;
  height: 150px;
}
.B {
  flex: 1 1 auto;
  background: #666;
  padding: 20px;

}
.D {
  height: 40rem;
  background: #333;
}

.X {
  background: green;
  padding: 25px;
}

.Y {
  background: red;
  padding: 25px;
  overflow-y: auto;
  max-height: 25vh;
}
<div class="C">
  <div class="A"></div>
  <div class="B">
    <div class="X">
      <p>some x content</p>
    </div>
    <div class="Y" >
      <p>some y content</p>
    <div class="D"></div>
    </div>
  </div>
</div>

user_174880150
Related