Javascript 是否适合物料界面中表格的父级高度？

我希望桌子的高度适合家长的可用高度。理想情况下，我希望：

• 要始终停靠在父容器底部的页脚

• 如果表格包含几行，则页脚应保持固定在底部

• 如果表格包含的行数超过父级的高度，需要溢出，则溢出应仅对表格主体可见，并且页脚应保持固定在底部，而不是向下推

• 如果可能，采用flexbox方法（在我看来，这是一个flex场景）

我不想要的是：

• A高度：100vh进近

• 涉及的计算（100vh-***px）（因为我想在解决方案中的任意组件层次结构中使用该方法）

• 桌子上的固定高度

• 使用绝对/固定定位

• 无第三方解决方案（如有可能）

• 使用。在视线之外

例如：

可视示例：

---

增加一个项目以占用所有可用空间，但不超过父项目的高度，其工作原理如下：

.parent {
   // use flexbox layout for children
   display: flex;
   flex-direction: column;
}
.childThatGrows: {
   // take as much space as available
   flex-grow: 1;        

   // don't take more space as available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

为什么

最小高度：0

？看

---

对于您的示例，这可能如下所示：。

增加一个项目以占用所有可用空间，但不超过父项的高度，其工作原理如下：

.parent {
   // use flexbox layout for children
   display: flex;
   flex-direction: column;
}
.childThatGrows: {
   // take as much space as available
   flex-grow: 1;        

   // don't take more space as available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

为什么

最小高度：0

？看

---

对于您的示例，这可能是这样的：。

谢谢您的回答，它确实很有帮助，但是当我将它扩展到更复杂的布局时，它不起作用，您能告诉我一种解决方法吗？谢谢你！这是codesandbox：谢谢你的回答，它真的很有帮助，但是当我将它扩展到更复杂的布局时，它不起作用，你能告诉我一个解决它的方法吗？谢谢你！以下是代码沙盒：