Как рассчитвается 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.


Ответы (0 шт):