DIV（位置：固定）内的 DIV（溢出-y：滚动）溢出父级边界

Question

我正在建立一个在线商店。

当用户点击一个产品时，一个弹出的 div 会包含基本的项目信息和一些评论。此弹出窗口没有固定高度，而是使用position: fixed 和上/下/右/左边界设置

我在这篇文章的底部附加了一个模型。着色和透明度只是为了帮助说明。

无论我尝试过什么，除了设置div.scrollable 的高度之外，它总是会溢出其父级。 CSS可以单独解决这个问题，如何解决？或者我必须使用 javascript 来计算高度。 我希望.scrollable 元素填充.page 的剩余高度，但不要超出边界/溢出。

我已经尝试过 flexbox，但没有看到结果有什么不同，所以这里没有包含任何内容。

* {
  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

如果您希望 .scrollable div 可滚动，您必须为其设置最大高度。

此外，如果您在#novella 上设置底部样式，它会拉伸，导致 div 从上到下移动。

所以你必须删除 #novella 底部位置样式并在 .scrollable 上设置最大高度。

代码如下：

* {
  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：如果您想使用响应式 css 设置高度，则必须为您的父母 #novella 指定高度。

Answer 2

我从this answer by greenfield 得出了一个解决方案。我更喜欢更明显的东西，但这正是我想要的。

在有两个子元素的父元素中，将其应用于父元素，在我的例子中是 .page 元素。

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)

现在，因为我没有指定任何父元素的高度，所以它一直级联到我的.novella 元素，这意味着高度基于top 和bottom 边界。不幸的是，我尝试过的其他 CSS 方法都不会接受这个隐含的高度。