Get nested element to respect max-height restriction of parent elements-CodePudding

I currently try to implement a container with a header, content and footer section. It uses the following HTML

<div >
  <div >
    <div >Header</div>
    <div >
      Scrollable content
    </div>
    <div >footer</div>
  </div>
</div>

and the following CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


body  {
  height: 100vh;
  max-height: 100%;
}

body {
  display: block;
  margin: 5px;
  border: 1px solid red;
}

.component {
  border: 2px solid black;
  margin: 5px;
  max-height: 100%;
}

.header {
  height: 50px;
  background-color: lightblue;
}

.footer {
  height: 75px;
  background-color: lightgrey;
}

.container {
  max-height: 100%;
  border: 1px solid blue;
}

.scroll-content {
  overflow-y: auto;
  background-color: lavender;
  max-height: calc(100% - 75px - 50px);
  // this one changes dynamically but should respect max-height
  height: 800px;
}

Want i want is that the content container can grow/shrink dynamically w.r.t. to the scroll-content container content size, and gets a scrollbar when growing larger than the max-height. Unfortunately, i can not get this to work.

Here is a link to a codepen containing the same code: https://codepen.io/drivt/pen/zYjXjoK

Does anyone have an idea what i need to do to achieve the desired result?

CodePudding user response：

In your css, change overflow-y:auto to overflow-y:scroll

.scroll-content {
  overflow-y: scroll;
}

CodePudding user response：

I changed HTML and CSS, but the main point is to use flex-grow: 1; on the .scroll-content.

See the snippet below.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  max-height: 100vh;
  display: block;
  margin: 5px;
  border: 1px solid red;
}

#button {
  height: 40px;
}

.component {
  border: 2px solid black;
  padding: 5px;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.header {
  min-height: 50px;
  background-color: lightblue;
}

.scroll-content {
  overflow-y: auto;
  background-color: lavender;
  flex-grow: 1;
}

.footer {
  min-height: 75px;
  background-color: lightgrey;
}

<div >
  <div >Header</div>
  <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum, quam nec tempus hendrerit, libero augue mattis dolor, ut posuere lorem sem eget arcu. Proin ultrices semper aliquam. Nullam metus lectus, hendrerit ut placerat vel, consequat et ligula.
    Nam et neque est. Vestibulum rhoncus et mi vel suscipit. Fusce rhoncus vitae enim id iaculis. Vestibulum rutrum quis quam ac mattis. Donec ac ultrices velit. Aliquam pellentesque sem eget quam feugiat, eu sagittis dui porta. Quisque sit amet dui pulvinar,
    lacinia ipsum pharetra, interdum ante. Integer pretium urna vitae odio laoreet egestas. Pellentesque nisl justo, ullamcorper et iaculis vel, scelerisque vitae dui. Proin eget accumsan purus, at ultrices sapien. Vestibulum ullamcorper nisl at blandit
    faucibus. Donec ut velit ut tortor posuere accumsan sit amet non nulla. Quisque lectus mi, aliquet ac enim ac, porttitor imperdiet quam. Donec dignissim ligula in suscipit semper. Vestibulum sit amet nibh aliquet, vehicula velit in, posuere elit.
    Duis ac porta velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse id nibh ut enim laoreet cursus id ut nulla. Donec dapibus arcu non sem egestas semper. Nulla efficitur lobortis ligula, eu auctor
    felis efficitur in. Quisque vitae justo laoreet quam tempus pulvinar a ac ligula. Quisque in auctor tortor. Pellentesque aliquam sagittis consequat. Etiam ac tempus quam. In suscipit in mauris vel vehicula. Proin vulputate eros neque, vel mattis neque
    tempor quis. Nulla facilisi. Sed in ultricies massa, ac bibendum elit. Morbi ullamcorper orci id tempus iaculis. Maecenas blandit non magna ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur
    luctus quam a orci pretium ultrices eu eget mi. Fusce sed tortor non est volutpat facilisis vitae ultricies massa. Phasellus nec justo eget massa egestas lobortis. Aliquam venenatis eros in placerat lacinia. Etiam pharetra lectus quis neque malesuada
    efficitur et eget elit. Phasellus a mattis est, et efficitur nibh. Sed vehicula nulla ut venenatis lobortis. Pellentesque eros leo, facilisis eget dictum ut, scelerisque eget velit. Phasellus felis orci, rutrum ac magna eu, suscipit lobortis lorem.
    Suspendisse eu volutpat nulla, quis commodo nisi. Morbi tempus tristique justo sed porttitor. Ut et odio at est malesuada suscipit. Vestibulum eros ex, bibendum et lobortis quis, sagittis nec ligula. Suspendisse sit amet dolor id libero imperdiet
    laoreet at quis purus. In orci odio, mattis ac felis sed, placerat ultricies tortor. Nunc non blandit eros. Maecenas suscipit rhoncus leo et laoreet. Ut ac malesuada risus, eget convallis elit. Sed sagittis arcu in pretium vehicula. Etiam molestie
    leo sed odio hendrerit, vel facilisis nisi convallis. Vivamus euismod tristique nisi, eu feugiat sapien tempor et. Donec sagittis venenatis augue, quis vehicula purus congue et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum,
    quam nec tempus hendrerit, libero augue mattis dolor, ut posuere lorem sem eget arcu. Proin ultrices semper aliquam. Nullam metus lectus, hendrerit ut placerat vel, consequat et ligula. Nam et neque est. Vestibulum rhoncus et mi vel suscipit. Fusce
    rhoncus vitae enim id iaculis. Vestibulum rutrum quis quam ac mattis. Donec ac ultrices velit. Aliquam pellentesque sem eget quam feugiat, eu sagittis dui porta. Quisque sit amet dui pulvinar, lacinia ipsum pharetra, interdum ante. Integer pretium
    urna vitae odio laoreet egestas. Pellentesque nisl justo, ullamcorper et iaculis vel, scelerisque vitae dui. Proin eget accumsan purus, at ultrices sapien. Vestibulum ullamcorper nisl at blandit faucibus. Donec ut velit ut tortor posuere accumsan
    sit amet non nulla. Quisque lectus mi, aliquet ac enim ac, porttitor imperdiet quam. Donec dignissim ligula in suscipit semper. Vestibulum sit amet nibh aliquet, vehicula velit in, posuere elit. Duis ac porta velit. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse id nibh ut enim laoreet cursus id ut nulla. Donec dapibus arcu non sem egestas semper. Nulla efficitur lobortis ligula, eu auctor felis efficitur in. Quisque vitae justo laoreet quam
    tempus pulvinar a ac ligula. Quisque in auctor tortor. Pellentesque aliquam sagittis consequat. Etiam ac tempus quam. In suscipit in mauris vel vehicula. Proin vulputate eros neque, vel mattis neque tempor quis. Nulla facilisi. Sed in ultricies massa,
    ac bibendum elit. Morbi ullamcorper orci id tempus iaculis. Maecenas blandit non magna ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur luctus quam a orci pretium ultrices eu eget mi. Fusce
    sed tortor non est volutpat facilisis vitae ultricies massa. Phasellus nec justo eget massa egestas lobortis. Aliquam venenatis eros in placerat lacinia. Etiam pharetra lectus quis neque malesuada efficitur et eget elit. Phasellus a mattis est, et
    efficitur nibh. Sed vehicula nulla ut venenatis lobortis. Pellentesque eros leo, facilisis eget dictum ut, scelerisque eget velit. Phasellus felis orci, rutrum ac magna eu, suscipit lobortis lorem. Suspendisse eu volutpat nulla, quis commodo nisi.
    Morbi tempus tristique justo sed porttitor. Ut et odio at est malesuada suscipit. Vestibulum eros ex, bibendum et lobortis quis, sagittis nec ligula. Suspendisse sit amet dolor id libero imperdiet laoreet at quis purus. In orci odio, mattis ac felis
    sed, placerat ultricies tortor. Nunc non blandit eros. Maecenas suscipit rhoncus leo et laoreet. Ut ac malesuada risus, eget convallis elit. Sed sagittis arcu in pretium vehicula. Etiam molestie leo sed odio hendrerit, vel facilisis nisi convallis.
    Vivamus euismod tristique nisi, eu feugiat sapien tempor et. Donec sagittis venenatis augue, quis vehicula purus congue et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum, quam nec tempus hendrerit, libero augue mattis dolor,
    ut posuere lorem sem eget arcu. Proin ultrices semper aliquam. Nullam metus lectus, hendrerit ut placerat vel, consequat et ligula. Nam et neque est. Vestibulum rhoncus et mi vel suscipit. Fusce rhoncus vitae enim id iaculis. Vestibulum rutrum quis
    quam ac mattis. Donec ac ultrices velit. Aliquam pellentesque sem eget quam feugiat, eu sagittis dui porta. Quisque sit amet dui pulvinar, lacinia ipsum pharetra, interdum ante. Integer pretium urna vitae odio laoreet egestas. Pellentesque nisl justo,
    ullamcorper et iaculis vel, scelerisque vitae dui. Proin eget accumsan purus, at ultrices sapien. Vestibulum ullamcorper nisl at blandit faucibus. Donec ut velit ut tortor posuere accumsan sit amet non nulla. Quisque lectus mi, aliquet ac enim ac,
    porttitor imperdiet quam. Donec dignissim ligula in suscipit semper. Vestibulum sit amet nibh aliquet, vehicula velit in, posuere elit. Duis ac porta velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse
    id nibh ut enim laoreet cursus id ut nulla. Donec dapibus arcu non sem egestas semper. Nulla efficitur lobortis ligula, eu auctor felis efficitur in. Quisque vitae justo laoreet quam tempus pulvinar a ac ligula. Quisque in auctor tortor. Pellentesque
    aliquam sagittis consequat. Etiam ac tempus quam. In suscipit in mauris vel vehicula. Proin vulputate eros neque, vel mattis neque tempor quis. Nulla facilisi. Sed in ultricies massa, ac bibendum elit. Morbi ullamcorper orci id tempus iaculis. Maecenas
    blandit non magna ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur luctus quam a orci pretium ultrices eu eget mi. Fusce sed tortor non est volutpat facilisis vitae ultricies massa. Phasellus
    nec justo eget massa egestas lobortis. Aliquam venenatis eros in placerat lacinia. Etiam pharetra lectus quis neque malesuada efficitur et eget elit. Phasellus a mattis est, et efficitur nibh. Sed vehicula nulla ut venenatis lobortis. Pellentesque
    eros leo, facilisis eget dictum ut, scelerisque eget velit. Phasellus felis orci, rutrum ac magna eu, suscipit lobortis lorem. Suspendisse eu volutpat nulla, quis commodo nisi. Morbi tempus tristique justo sed porttitor. Ut et odio at est malesuada
    suscipit. Vestibulum eros ex, bibendum et lobortis quis, sagittis nec ligula. Suspendisse sit amet dolor id libero imperdiet laoreet at quis purus. In orci odio, mattis ac felis sed, placerat ultricies tortor. Nunc non blandit eros. Maecenas suscipit
    rhoncus leo et laoreet. Ut ac malesuada risus, eget convallis elit. Sed sagittis arcu in pretium vehicula. Etiam molestie leo sed odio hendrerit, vel facilisis nisi convallis. Vivamus euismod tristique nisi, eu feugiat sapien tempor et. Donec sagittis
    venenatis augue, quis vehicula purus congue et.</div>
  <div >footer</div>
</div>