Css `溢出：自动`不在动态高度的Chrome中工作

我试图使

details

元素的内容可以滚动，只使用CSS（即没有JS）。此

详细信息的高度是动态的，取决于视口

在Firefox上，我获得了预期的结果。但是在Chrome上，
overflow:auto
在这种情况下没有影响：

Firefox（预期结果）：


铬（错误行为）：


当设置固定高度时，内容可以在Chrome上滚动，但我希望它是动态的

以下是简化代码：


*{
框大小：边框框；
}
：根{
--汇总高度：32px；
--文字颜色：仿古白色；
}
细节{
宽度：200px；
边框：1px实心灰色；
}
详情[公开]{
高度：64vh；
弹性：110；
}
总结{
背景颜色：浅灰色；
颜色：var（--文本颜色）；
文本阴影：0 0 3px#1a1a1a；
高度：var（--汇总高度）；
行高：var（--汇总高度）；
}
保险商实验室{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
列表样式：无；
保证金：0；
填充：0；
最小高度：0；
高度：计算（100%-var（--汇总高度））；
溢出y：自动；
滚动条宽度：薄；
}
李{
显示：块；
}

细节





























您应该在details div容器中设置
溢出：auto
样式，而不是
ul
容器。
并为summary div容器添加
位置：sticky


*{
框大小：边框框；
}
：根{
--汇总高度：32px；
--文字颜色：仿古白色；
}
细节{
宽度：200px；
边框：1px实心灰色；
溢出：自动；
}
详情[公开]{
高度：64vh；
弹性：110；
}
总结{
背景颜色：浅灰色；
颜色：var（--文本颜色）；
文本阴影：0 0 3px#1a1a1a；
高度：var（--汇总高度）；
行高：var（--汇总高度）；
位置：粘性；
排名：0；
}
保险商实验室{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
列表样式：无；
保证金：0；
填充：0；
最小高度：0；
高度：计算（100%-var（--汇总高度））；
滚动条宽度：薄；
}
李{
显示：块；
}

细节





























您应该在details div容器中设置
溢出：auto
样式，而不是
ul
容器。
并为summary div容器添加
位置：sticky


*{
框大小：边框框；
}
：根{
--汇总高度：32px；
--文字颜色：仿古白色；
}
细节{
宽度：200px；
边框：1px实心灰色；
溢出：自动；
}
详情[公开]{
高度：64vh；
弹性：110；
}
总结{
背景颜色：浅灰色；
颜色：var（--文本颜色）；
文本阴影：0 0 3px#1a1a1a；
高度：var（--汇总高度）；
行高：var（--汇总高度）；
位置：粘性；
排名：0；
}
保险商实验室{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
列表样式：无；
保证金：0；
填充：0；
最小高度：0；
高度：计算（100%-var（--汇总高度））；
滚动条宽度：薄；
}
李{
显示：块；
}

细节





























试试这个。
将详细信息高度设置为100%，将ul高度设置为所需的值


*{
框大小：边框框；
}
：根{
--汇总高度：32px；
--文字颜色：仿古白色；
}
细节{
宽度：200px；
边框：1px实心灰色；
}
详情[公开]{
身高：100%；
弹性：110；
}
总结{
背景颜色：浅灰色；
颜色：var（--文本颜色）；
文本阴影：0 0 3px#1a1a1a；
高度：var（--汇总高度）；
行高：var（--汇总高度）；
}
保险商实验室{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
列表样式：无；
保证金：0；
填充：0；
最小高度：0；
高度：计算（64vh-var（--汇总高度））；
溢出y：自动；
滚动条宽度：薄；
}
李{
显示：块；
}

细节





























试试这个。
将详细信息高度设置为100%，将ul高度设置为所需的值


*{
框大小：边框框；
}
：根{
--汇总高度：32px；
--文字颜色：仿古白色；
}
细节{
宽度：200px；
边框：1px实心灰色；
}
详情[公开]{
身高：100%；
弹性：110；
}
总结{
背景颜色：浅灰色；
颜色：var（--文本颜色）；
文本阴影：0 0 3px#1a1a1a；
高度：var（--汇总高度）；
行高：var（--汇总高度）；
}
保险商实验室{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
L