Use remaining parent height without calc

Question

I've created a layout for a panel system I am working on (see code below). This is working fine, except that I need to use calc() in order to determine the height of the element minus their siblings. Since in the final stage the height of the sibling elements is dynamic it will not scale.

My question is, how could I make the following code example work without calc() where the values used inside of it will be dynamically determined?

body {
  display: flex;
  margin: 0;
}

.frame {
  position: relative;
  width: 250px;
  height: 500px;
  margin: 100px auto;
  border: 2px solid black;
}

.panel {
  position: absolute;
  top: -64px;
  bottom: 0;
  width: 100%;
  background-color: hotpink;
}

.panel-header {
  width: 100%;
  height: 64px;
  background-color: lime;
  flex-shrink: 0;
}

.panel-content {
  width: 100%;
  height: calc(100% - 64px);
  background-color: aquamarine;
}

.panel-handle {
  width: 100%;
  height: 32px;
  background-color: purple;
}

.panel-content-inner {
  width: 100%;
  height: calc(100% - 32px);
  overflow-y: scroll;
}

<div class="frame">
  <div class="panel">
    <div class="panel-header"></div>
    <div class="panel-content">
      <div class="panel-handle"></div>
      <div class="panel-content-inner">
        <h4>Lorem impsum</h4>
        <p>
          orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
          Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
          pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
          ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
          sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
          Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
          tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
          nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
          Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
          porttitor et.
        </p>
        <h4>Lorem impsum</h4>
        <p>
          orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
          Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
          pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
          ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
          sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
          Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
          tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
          nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
          Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
          porttitor et.
        </p>
        <h4>Lorem impsum</h4>
        <p>
          orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
          Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
          pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
          ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
          sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
          Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
          tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
          nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
          Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
          porttitor et.
        </p>
        <h4>Lorem impsum</h4>
        <p>
          orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
          Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
          pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
          ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
          sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
          Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
          tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
          nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
          Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
          porttitor et.
        </p>
      </div>
    </div>
  </div>
</div>

@G-Cyrillus I don't think this is a duplicate of that question as the same problem applies when this layout is converted to a flexbox layout. See: https://stackblitz.com/edit/js-uealca — Jon Koops, Oct 23 '20 at 17:35
^ in the stackblitz don't use height:100% but `flex-grow: 1; min-height: 0;` — Temani Afif, Oct 23 '20 at 19:29
@TemaniAfif Thanks a bunch, that seems to resolve my issue perfectly! I am curious about why this is working though, going to do a bit more digging. — Jon Koops, Oct 24 '20 at 11:39
Yeah, https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size answers my question perfectly. — Jon Koops, Oct 24 '20 at 11:47

Use remaining parent height without calc

0 Answers0