Changing size of flex item doesnt reduce the other flex item size
Question
I the below code i have tried change the font size of flex items. On increasing the font size i expect the corresponding flex-item to occupy the entire parent container height and hide the remaining flex items. But flex item height is stopped to increase at a certain point and the content starts hidden.
current:
Expected:
.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>
2 answers
solution1
0 2019-09-23 13:51:06
Okay, so what I think might work is to set flex-shrink programmatically to the inverted font size value as the font size changes.
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;
});
}
Here's a fiddle .
You'll have to work on getting those overflow and ellipsis properties to work.
solution2
0 2019-09-23 17:18:08
not sure if it's what you want.
have you tried to change
.value-container{
overflow:visible;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.