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

Question

我的html结构如下：

• main-window (height: 100vh) // fiddle 使用 -16px 来说明 jsfiddle.net 上的填充
  • 工作区（高度：100%）
    • workitem (height: calc(100% - 40px)) // 40px = 命令高度
      • 工作项-hdr（高度：30px）
      • workitem-scrollable (height: calc(100% - 30px)) // 30px = header height
    • 命令（高度：40px）

.main-window {
  height: calc(100vh - 16px);
}
.workspace {
  height: 100%;
  background-color: yellow;
}
.workitem {
  height: calc(100% - 40px);
}
.commands {
  height: 40px;
  background-color: pink;
}
.workitem-hdr {
  height: 30px;
  background-color: gray;
}
.workitem-scrollable {
  height: calc(100% - 30px);
  background-color: lightgray;
  overflow-y: auto;
}

<div class="main-window">
  <div class="workspace">
    <div class="workitem">
      <div class="workitem-hdr">
        Item Header
      </div>
      <div class="workitem-scrollable">
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
      </div>    
    </div>
    <div class="commands">
      <button>Save</button>
      <button>Cancel</button>
    </div>
  </div>
</div>

查看工作小提琴：https://jsfiddle.net/d4msvep2/

一切都很好。当我降低窗口的高度时，我会根据需要获得可滚动的内容。

挑战

这样做的问题是命令位于屏幕底部（可能距离操作位置很远）。我想要实现的是命令出现在工作项的正下方。因此，我将工作项更改为：

max-height: calc(100% - 40px);

.main-window {
  height: calc(100vh - 16px);
}
.workspace {
  height: 100%;
  background-color: yellow;
}
.workitem {
  max-height: calc(100% - 40px);
}
.commands {
  height: 40px;
  background-color: pink;
}
.workitem-hdr {
  height: 30px;
  background-color: gray;
}
.workitem-scrollable {
  height: calc(100% - 30px);
  background-color: lightgray;
  overflow-y: auto;
}

<div class="main-window">
  <div class="workspace">
    <div class="workitem">
      <div class="workitem-hdr">
        Item Header
      </div>
      <div class="workitem-scrollable">
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
      </div>    
    </div>
    <div class="commands">
      <button>Save</button>
      <button>Cancel</button>
    </div>
  </div>
</div>

问题是这现在破坏了我的工作项可滚动

破小提琴：https://jsfiddle.net/zo2rcahm/

如何让按钮靠近工作发生的位置，而不是在屏幕底部，同时保持可滚动的工作项-可滚动？

Answer 1

.workitem-scrollable 有一个max-height: calc(100% - 40px)

高度的值100% 基于父元素的固定高度。但是父元素.workitem只有max-height，这不是固定高度。

所以workitem-scrollable需要/想要的高度。如果您建议将高度固定为 .workitem（即 200 像素），它绝对是可滚动的 ... ;-)

所以：只需将您需要的值告知height 属性.workitem，您就可以继续...

.main-window {
  height: calc(100vh - 16px);
}
.workspace {
  height: 100%;
  background-color: yellow;
}
.workitem {
  max-height: calc(100% - 40px);
  /* ADDED */
  height: 200px;
}
.commands {
  height: 40px;
  background-color: pink;
}
.workitem-hdr {
  height: 30px;
  background-color: gray;
}
.workitem-scrollable {
  height: calc(100% - 30px);
  background-color: lightgray;
  overflow-y: auto;
}

<div class="main-window">
  <div class="workspace">
    <div class="workitem">
      <div class="workitem-hdr">
        Item Header
      </div>
      <div class="workitem-scrollable">
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
        <div>row</div>
      </div>    
    </div>
    <div class="commands">
      <button>Save</button>
      <button>Cancel</button>
    </div>
  </div>
</div>