Как рассчитвается flex-grow в браузере google-chrome?
.wrapper {
display: flex;
width: 500px;
border: 2px solid orangered;
font-size: 3em;
}
.item1 {
flex: 1;
background-color: rgb(76, 168, 23);
}
.item2 {
flex: 2;
}
<div class="wrapper">
<div class="item1">CSS</div>
<div class="item2">is</div>
</div>
Здравствуйте. Подскажите, пожалуйста, где я ошибся в рассчётах.
Есть формула: ширина элемента = ((flex-grow элемента / сумма значений flex-grow) * доступное пространство) + исходная ширина элемента.
Исходная ширина элемента item1 = 85px
Исходная ширина элемента item2 = 32px
Сумма значений flex-grow = 3
Доступное пространство = 500px (ширина флекс-контейнера) - (85px + 32px (ширина флекс-элементов)) = 383px.
Допустим рассчитаем item2 = ((2/3) * 383px) + 32px = 287px.
Браузер же выводит значение ширины элемента 333px.