DIV(overflow-y: scroll) within DIV(position:fixed) overflowing parent's bounds

Question

I'm setting up an online store.

When the user clicks a product, a popup div holds basic item information, and some reviews. This popup has no fixed height, and is instead set with position: fixed and top/bottom/right/left bounds

I've appended a mockup to the bottom of this post. The coloring and transparency is just to help illustrate.

No matter what I've tried, short of setting the height of the div.scrollable, it always overflows its parent. Can CSS alone fix this, and how? Or must I use javascript to calculate the height. I would like the .scrollable element to fill the remaining height of .page, but not exceed the bounds/overflow.

I've experimented with flexbox, but have seen no difference in result so didn't include any of that here.

* {
  box-sizing: border-box;
}

#content {
  background-color: lightgray;
  width: 100%;
  max-width: 700px;
  padding: 1em;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#novella {
  position:fixed;
  top: 1em;
  bottom: 1em;
  left: 0;
  right: 0;
  max-width: 400px;
  margin: 0 auto;
  border: 2px solid black;
}

.productInfo {background-color: white;}

.scrollable {
  background-color: rgba(225,225,225,.5);
  overflow-y: scroll;
}

.grid {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, 25%);
    grid-gap: 1rem;
    justify-content: space-between;
    align-content: flex-start;
    }

<div id="content">
  <ul class="grid">
    <li>Fubar Product</li>
    <li>Foo Product</li>
    <li>Bar Product</li>
    <li>Fu Product</li>
    <li>CSS Knowledge</li>
    <li>Fubar Product</li>
    <li>Foo Product</li>
    <li>Bar Product</li>
    <li>Fu Product</li>
    <li>CSS Knowledge</li>
    <li>Fubar Product</li>
    <li>Foo Product</li>
    <li>Bar Product</li>
    <li>Fu Product</li>
    <li>CSS Knowledge</li>
  </ul>
  <div id="novella">
    <div class="page">
      <div class="productInfo">
        Fubar product.<br>
        $99.99<br>
        It's the greatest, beyond all others
      </div>
      <div class="scrollable">
        <ul>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

I derived a solution from this answer by greenfield. I'd prefer something that was more obvious, but this does exactly what I wanted.

In a parent element with two children, apply this to the parent, in my case my .page element.

grid-template-rows: minmax(60px, auto) minmax(0, 100%);
// where 60px is the minimum height of your first element,
// and 0 is the minimum height of your selecond)

Now, because I'm not specifying height of any of the parent elements, it cascaded to all the way up to my .novella element, which implies a height based on top and bottom bounds. It's unfortunate that no other CSS method I tried would accept this implied height.

Answer 2

If you want the .scrollable div to be scrollable you have to set a max-height for it.

Also if you let the bottom style on your #novella it will make it strech, causing the div to go from top to bottom.

So you have to remove #novella bottom position style and set a max-height on .scrollable..

Here is the code:

* {
  box-sizing: border-box;
}

#content {
  background-color: lightgray;
  width: 100%;
  max-width: 700px;
  padding: 1em;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#novella {
  position:fixed;
  top: 1em;
  left: 0;
  right: 0;
  max-width: 400px;
  margin: 0 auto;
  border: 2px solid black;
}

.productInfo {background-color: white;}

.scrollable {
  background-color: rgba(225,225,225,.5);
  overflow-y: scroll;
  max-height:150px;
}

.grid {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, 25%);
    grid-gap: 1rem;
    justify-content: space-between;
    align-content: flex-start;
    }

<div id="content">
  <ul class="grid">
    <li>Fubar Product</li>
    <li>Foo Product</li>
    <li>Bar Product</li>
    <li>Fu Product</li>
    <li>CSS Knowledge</li>
    <li>Fubar Product</li>
    <li>Foo Product</li>
    <li>Bar Product</li>
    <li>Fu Product</li>
    <li>CSS Knowledge</li>
    <li>Fubar Product</li>
    <li>Foo Product</li>
    <li>Bar Product</li>
    <li>Fu Product</li>
    <li>CSS Knowledge</li>
  </ul>
  <div id="novella">
    <div class="page">
      <div class="productInfo">
        Fubar product.<br>
        $99.99<br>
        It's the greatest, beyond all others
      </div>
      <div class="scrollable">
        <ul>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
          <li>It was great</li>
          <li>I liked it</li>
          <li>Not what I wanted</li>
          <li>Sized perfectly</li>
          <li>Not great</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Ps: If you want to set height with responsive css you will have to give an height for you parent #novella.