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

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 >
  <div ></div>
  <div >
    <div >
      <p>some x content</p>
    </div>
    <div  >
      <p>some y content</p>
    <div ></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?

CodePudding user response：

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 >
  <div ></div>
  <div >
    <div >
      <p>some x content</p>
    </div>
    <div  >
      <p>some y content</p>
    <div ></div>
    </div>
  </div>
</div>