Css DIV（overflow-y:scroll）内的DIV（位置：固定）溢出父对象'；界

我正在开一家网上商店

当用户单击一个产品时，弹出的div会保存基本的项目信息和一些评论。此弹出窗口没有固定高度，而是设置了

位置：fixed

和上/下/右/左边界

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

无论我尝试了什么，除了设置div.scrollable的高度，它总是溢出其父级。CSS能单独解决这个问题吗？如何解决？或者我必须使用javascript来计算高度我希望

.scrollable

元素填充

.page

的剩余高度，但不要超过边界/溢出

我已经用flexbox做过实验，但没有看到结果上的差异，所以这里没有包括任何这些

*{
框大小：边框框；
}
#内容{
背景颜色：浅灰色；
宽度：100%；
最大宽度：700px；
填充：1em；
左：0；
右：0；
保证金：0自动；
}
#中篇小说{
位置：固定；
顶部：1米；
底部：1米；
左：0；
右：0；
最大宽度：400px；
保证金：0自动；
边框：2件纯黑；
}
.productInfo{背景色：白色；}
.可滚动{
背景色：rgba（22525225.5）；
溢出y：滚动；
}
.电网{
列表样式类型：无；
显示：网格；
网格模板列：重复（自动拟合，25%）；
网格间距：1rem；
证明内容：之间的空间；
调整内容：灵活启动；
}

Fubar产品
食品
棒材产品
Fu产品
CSS知识
Fubar产品
食品
棒材产品
Fu产品
CSS知识
Fubar产品
食品
棒材产品
Fu产品
CSS知识

Fubar产品。

$99.99

这是最伟大的，超越所有其他的

太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好

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

此外，如果你让你的中篇小说的底部风格，它会使它拉伸，导致div从上到下

因此，您必须删除#novella底部位置样式，并在.scrollable.上设置最大高度

代码如下：

*{
框大小：边框框；
}
#内容{
背景颜色：浅灰色；
宽度：100%；
最大宽度：700px；
填充：1em；
左：0；
右：0；
保证金：0自动；
}
#中篇小说{
位置：固定；
顶部：1米；
左：0；
右：0；
最大宽度：400px；
保证金：0自动；
边框：2件纯黑；
}
.productInfo{背景色：白色；}
.可滚动{
背景色：rgba（22525225.5）；
溢出y：滚动；
最大高度：150像素；
}
.电网{
列表样式类型：无；
显示：网格；
网格模板列：重复（自动拟合，25%）；
网格间距：1rem；
证明内容：之间的空间；
调整内容：灵活启动；
}

Fubar产品
食品
棒材产品
Fu产品
CSS知识
Fubar产品
食品
棒材产品
Fu产品
CSS知识
Fubar产品
食品
棒材产品
Fu产品
CSS知识

Fubar产品。

$99.99

这是最伟大的，超越所有其他的

太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好
太棒了
我喜欢它
不是我想要的
尺寸完美
不太好

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

此外，如果你让你的中篇小说的底部风格，它会使它拉伸，导致div从上到下

因此，您必须删除#novella底部位置样式，并在.scrollable.上设置最大高度

代码如下：

*{
框大小：边框框；
}
#内容{
背景颜色：浅灰色；
宽度：100%；
最大宽度：700px；
填充：1em；
左：0；
右：0；
保证金：0自动；
}
#中篇小说{
位置：固定；
顶部：1米；
左：0；
右：0；
最大宽度：400px；
保证金：0自动
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)