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

Question

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

当前的：

预期的：

 .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>

Answer 1

好的，所以我认为可能的工作是以编程方式将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;
  });
}

这是一个小提琴。

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

Answer 2

不知道这是否是你想要的。

你试过改变吗

.value-container{
   overflow:visible;
 }

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

问题描述

2 个解决方案

解决方案1
0 2019-09-23 13:51:06

解决方案2
0 2019-09-23 17:18:08

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

问题描述

2 个解决方案

解决方案1 0 2019-09-23 13:51:06

解决方案2 0 2019-09-23 17:18:08

解决方案1
0 2019-09-23 13:51:06

解决方案2
0 2019-09-23 17:18:08