Изменение размера элемента Flex не уменьшает размер другого элемента Flex - PullRequest
Новая
       1

Изменение размера элемента Flex не уменьшает размер другого элемента Flex

0 голосов
/ 23 сентября 2019

В приведенном ниже коде я попытался изменить размер шрифта элементов Flex.При увеличении размера шрифта я ожидаю, что соответствующий flex-элемент займет всю высоту родительского контейнера и скроет оставшиеся flex-элементы.Но высота элемента Flex перестает увеличиваться в определенной точке, и содержимое начинает скрываться.

current:

Current Behavior

Ожидается:

enter image description here

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

0 голосов
/ 23 сентября 2019

не уверен, что это то, что вы хотите.

вы пытались изменить 

.value-container{
   overflow:visible;
 }
0 голосов
/ 23 сентября 2019

Хорошо, я думаю, что может сработать, чтобы программно установить 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;
  });
}

Вот скрипка .

Вам нужно будет поработать, чтобы эти свойства переполнения и многоточия работали.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...