Javascript 滚动嵌套flexbox列中的内容（具有动态高度）

我有一个带有全局页眉和页脚（具有动态高度）的页面，在页面剩余区域的中心有一张卡片，该卡片根据卡片中的内容缩小或增大

卡片本身也有一个页眉和页脚，我需要在页面上保持可见，而中间的内容是滚动的部分。我正经历着最艰难的时刻，试图弄明白如何完成这件事

编辑：我知道我可以通过给卡片内容一个最大高度来实现这一点，但由于全局和卡片页眉和页脚的所有高度都是动态的，我不知道在任何给定的时间给什么最大高度？或者我需要一个javascript解决方案来实现这一点

代码笔：

截图：

型号：

html，
身体{
填充：0px；
边际：0px；
背景颜色：粉红色；
}
.全球集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.卡片包装{
弯曲方向：行；
框大小：边框框；
显示器：flex；
地点内容：中心；
对齐项目：居中；
弹性：1100%；
最大高度：100%；
溢出y：自动；
}
.内部卡包装{
弹性：1100%；
框大小：边框框；
最大宽度：70%；
最大高度：100%；
}
.卡片{
显示器：flex；
弯曲方向：立柱；
背景色：白色；
填充：20px；
}
.卡片内容{
弹性：1；
溢出y：自动；
背景色：#ddd；
}
/*忽略：强制溢出*/
.溢出内容{
高度：2000px；
}
.全球信息{
背景颜色：绿色；
边际：0px；
填充：16px；
字体大小：20px；
字体大小：粗体；
颜色：白色；
}

全局标头
卡头
我只希望这个内容滚动，并缩小，如果它不占整个页面。

Lorem ipsum dolor sit amet，是一位杰出的领导者。Ut nec dapibus libero。这是一个很好的例子。Morbi sollicitudin，前欧盟pulvinar圣公会，nibh elit ullamcorper erat，欧盟viverra
sem dui eu orci。毛里斯拍卖行。不含酒醉调味品的维瓦摩斯葡萄。佩伦特式的尤伊斯莫德·马萨是一个不健康的人。莫里斯在《埃尼姆·马莱苏亚达·拉西尼亚》中饰演狮子座。nec mollis的Sed eget门
夸姆。无需使用维韦拉（viverra-ex-lorem），也可使用eget-euismod-ligula-gravida-vel。累加前庭。
卡片页脚
全局页脚

您必须设置卡div的最大高度，并将卡内容设置为滚动

例如：

---

您必须设置卡div的最大高度，并将卡内容设置为滚动

例如：

---

帮助浏览器将整个高度传递给子体容器。他们无法通过

.card wrapper-inner

只需向该类添加

display:flex

。该命令将激活

align items:stretch

default，该命令将使用从父级到子级的所有可用高度

换句话说，链条上缺少一个环节。完全的高度不能超过一级。通过使

.card wrapper-inner

成为一个灵活的容器，高度规则从上到下传递

html，
身体{
填充：0px；
边际：0px；
背景颜色：粉红色；
}
.全球集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.卡片包装{
弯曲方向：行；
框大小：边框框；
显示器：flex；
地点内容：中心；
对齐项目：居中；
弹性：1100%；
最大高度：100%；
溢出y：自动；
}
.内部卡包装{
显示：flex；/*新*/
弹性：1100%；
框大小：边框框；
最大宽度：70%；
最大高度：100%；
}
.卡片{
显示器：flex；
弯曲方向：立柱；
背景色：白色；
填充：20px；
}
.卡片内容{
弹性：1；
溢出y：自动；
背景色：#ddd；
}
/*忽略：强制溢出*/
.溢出内容{
高度：2000px；
}
.全球信息{
背景颜色：绿色；
边际：0px；
填充：16px；
字体大小：20px；
字体大小：粗体；
颜色：白色；
}

全局标头
卡头
我只希望这个内容滚动，并缩小，如果它不占整个页面。

Lorem ipsum dolor sit amet，是一位杰出的领导者。Ut nec dapibus libero。这是一个很好的例子。Morbi sollicitudin，前欧盟pulvinar圣公会，nibh elit ullamcorper erat，欧盟viverra
sem dui eu orci。毛里斯拍卖行。不含酒醉调味品的维瓦摩斯葡萄。佩伦特式的尤伊斯莫德·马萨是一个不健康的人。莫里斯在《埃尼姆·马莱苏亚达·拉西尼亚》中饰演狮子座。nec mollis的Sed eget门
夸姆。无需使用维韦拉（viverra-ex-lorem），也可使用eget-euismod-ligula-gravida-vel。累加前庭。
卡片页脚
全局页脚

帮助浏览器将整个高度传递给子体容器。他们无法通过

.card wrapper-inner

只需向该类添加

display:flex

。该命令将激活

align items:stretch

default，该命令将使用从父级到子级的所有可用高度

换句话说，链条上缺少一个环节。完全的高度不能超过一级。通过使

.card wrapper-inner

成为一个灵活的容器，高度规则从上到下传递

html，
身体{
填充：0px；
边际：0px；
背景颜色：粉红色；
}
.全球集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.卡片包装{
弯曲方向：行；
框大小：边框框；
显示器：flex；
地点内容：中心；
html,
body {
  padding: 0px;
  margin: 0px;
  background-color: pink;
}

.global-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  place-content: center;
  align-items: center;
  flex: 1 1 100%;
  max-height: 100%;
  overflow-y: auto;
}

.card-wrapper-inner {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 70%;
  max-height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: white;
  max-height: 70vh;
}

.card-content {
  flex: 1;
  background-color: #ddd;
  overflow: scroll;
  height:50vh;
}

/* ignore: the overflow content itself */
.overflow-content {
  height: 2000px;
}

.global-info {
  background-color: green;
  margin: 0px;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}