Html 更改弹性项目的大小不会减少其他弹性项目的大小

我在下面的代码中尝试更改flex项目的字体大小。在增加字体大小时，我希望相应的flex项占据整个父容器高度，并隐藏其余的flex项。但flex项目高度在某一点停止增加，内容开始隐藏

当前：

预期：

。父容器{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
宽度：200px；
高度：400px；
字体系列：“Heebo”；
字体大小：35px；
}
.收割台容器{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.价值容器{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.footer容器{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

标题
75
页脚

好的，所以我认为可能有效的方法是，随着字体大小的变化，通过编程将

flex-shrink

设置为反转字体大小值

function getFontSize(el) {
  return parseInt(
      el.style.fontSize
      || getComputedStyle(el).fontSize
    );
}

// call this whenever font size changes
function updateFlex(flexItems) {
  flexItems.forEach(el => {
    const size = getFontSize(el);
    el.style.flexShrink = 1/size;
  });
}

这是一个例子

---

您必须努力使这些溢出和省略号属性正常工作。

不确定这是否是您想要的

你试过改变吗

.value-container{
   overflow:visible;
 }

---

如果我增加任何flex项的字体大小，我希望flex项占据整个容器的高度。如果我增加值页脚容器的字体大小，那么它将占据整个容器的高度。在附上的图片中，我增加了价值容器的字体大小。你的期望有点模糊。“增加字体大小”是什么意思？从什么价值到什么？我不认为你的目标仅仅是CSS是可能的。字体大小是动态的吗？我将答案更新为使用

.value container

而不是

.header container

。是。。字体大小将是动态的，所有容器的行为都应该相同。如果我增加值font size，那么相应的容器也应该为页眉增加相同的值。