更改弹性项目的大小不会减小其他弹性项目的大小答案

【问题标题】：Changing size of flex item doesnt reduce the other flex item size更改弹性项目的大小不会减小其他弹性项目的大小
【发布时间】：2020-01-23 14:22:24
【问题描述】：

我尝试通过以下代码更改 flex 项目的字体大小。在增加字体大小时，我希望相应的弹性项目占据整个父容器的高度并隐藏剩余的弹性项目。但是 flex 项目的高度在某个点停止增加并且内容开始隐藏。

当前：

预期：

.parent-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200px;
height: 400px;
font-family: 'Heebo';
font-size:35px;
}

.header-container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value-container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer-container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Heebo' rel='stylesheet'>
</head>
<body>
<div class="parent-container">
<div class="header-container">
<span class="value-span">Header</span>
</div>
<div class="value-container">
<span class="value-span">75</span>
</div>
<div class="footer-container">
<span class="value-span">Footer</span>
</div>
</div>

</body>
</html>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

不确定是不是你想要的。

你有没有尝试过改变

.value-container{
   overflow:visible;
 }

【讨论】：

【解决方案2】：

好的，所以我认为可能可行的是在字体大小更改时以编程方式将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;
  });
}

这是fiddle。

您必须努力使这些溢出和省略号属性起作用。

【讨论】：

如果我增加任何弹性项目的字体大小，我希望弹性项目占据整个容器高度。如果我增加值页脚容器的字体大小，那么它会占据整个容器高度。在附图中，我增加了值容器的字体大小。
您的期望有点模糊。 “增加字体大小”是什么意思？从什么价值到什么？我认为您的目标仅靠 CSS 是不可能的。字体大小会是动态的吗？我更新了使用.value-container 而不是.header-container 的答案。
是的.. 字体大小将是动态的，并且所有容器的行为应该相同。如果我增加值字体大小，那么相应的容器应该同样增加标题。