Html CSS：当父内容使用最大高度而不是高度时，可滚动的子内容失败

我的html结构如下：

• 主窗口（高度：100vh）//fiddle使用-16px来解释jsfiddle.net上的填充
  • 工作空间（高度：100%）
    • 工作项（高度：计算（100%-40px））//40px=命令高度
      • 工作项hdr（高度：30px）
      • 工作项可滚动（高度：计算（100%-30px））//30px=收割台高度
    • 命令（高度：40px）

。主窗口{
高度：计算（100vh-16px）；
}
.工作空间{
身高：100%；
背景颜色：黄色；
}
.工作项目{
高度：计算（100%-40px）；
}
.命令{
高度：40px；
背景颜色：粉红色；
}
.workitem hdr{
高度：30px；
背景颜色：灰色；
}
.workitem可滚动{
高度：计算（100%-30px）；
背景颜色：浅灰色；
溢出y：自动；
}

项目标题
一行
一行
一行
一行
一行
一行
一行
拯救
取消

.workitem scrollable

有一个

最大高度：计算（100%-40px）

高度的值

100%

基于父元素的固定高度。但是父元素

.workitem

只有

最大高度

，这不是给定的固定高度

因此，

workitem scrollable

需要/想要多少高度。如果建议将固定高度设置为

.workitem

（即200px），则它立即可滚动…；-）

因此：只需向属性

height

提供

.workitem

所需的值，就可以继续

。主窗口{
高度：计算（100vh-16px）；
}
.工作空间{
身高：100%；
背景颜色：黄色；
}
.工作项目{
最大高度：计算（100%-40px）；
/*增加*/
高度：200px；
}
.命令{
高度：40px；
背景颜色：粉红色；
}
.workitem hdr{
高度：30px；
背景颜色：灰色；
}
.workitem可滚动{
高度：计算（100%-30px）；
背景颜色：浅灰色；
溢出y：自动；
}

项目标题
一行
一行
一行
一行
一行
一行
一行
拯救
取消

谢谢@Brebber，但在这种情况下，我在层次结构的任何一点上都没有固定的高度。这一切都基于视口高度，一切都应该从那里调整。使用

calc

'd高度可以，但使用

calc

'd最大高度是它的下降点。可能是。。。但是如果你不想让一个元素可以滚动，你需要给这个元素一个固定的高度。要做到这一点，基于百分比的值（即100%）仅在父元素具有固定高度时有效。。。这是css中必须使用的通用机制。但向前看：使用视口高度可以为元素建议固定高度，即

高度：80vH

。。。通常这只是一个计算问题；-）是的，我认为“固定”高度没有那么重要。我的工作小提琴没有固定的高度。问题在于引入了max height而不是height（因为我希望控件可以更小）。六羟甲基三聚氰胺六甲醚。