How to wrap the content of a child div, possibly with a scroll, inside a parent div with max height?-CodePudding

I would like the #child div to be inside #parent one, and when the content exceeds the max height, there should be a scroller in #list when the actual content exceeds the max height. The max height is a percentage of #wrapper height.

#wrapper {
  height: 100vh;
}

#parent {
  max-height: 40%;
  border: 1px solid red;
}

#child {
  border: 1px solid yellow;
  height: 100%;
}

#list {
  overflow-y: scroll;
  height: calc(100% - 20px);
}

<div id="wrapper">
  <div id="parent">
    <div id="child">
      <div>Header is not supposed to be scrollable</div>
      <div id="list">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
       </div>
    </div>
  </div>
 </div>

CodePudding user response：

To solve this problem, just apply the Overflow-y property to #Parent instead of #List.

#wrapper {
  height: 100vh;
}

#parent {
  overflow-y: scroll;
  max-height: 30%;
  border: 1px solid red;
}

#child {
  border: 1px solid yellow;
  height: 100%;
}

#list {
  height: 100%;
}

<div id="wrapper">
  <div id="parent">
    <div id="child">
      <div id="list">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
       </div>
    </div>
  </div>
 </div>

CodePudding user response：

You make use of CSS Grid here, and you would get the behavior you want, as far as I understood at least:

#wrapper {
  height: 100vh;
}

#parent {
  max-height: 40%;
  border: 1px solid red;
  display: grid;
  grid-template-rows: 1fr;
}

#child {
  overflow-y: auto;
  border: 1px solid yellow;
  display: grid;
  grid-template-rows: auto 1fr;
 
}

#list {
  overflow-y: auto;
}

<div id="wrapper">
  <div id="parent">
    <div id="child">
      <div>Header is not supposed to be scrollable</div>
      <div id="list">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
       </div>
    </div>
  </div>
 </div>