Разве я не понимаю свойство гибкого роста?

Боюсь, я не могу понять, как развиваться. Если вы перейдете к JSFiddle ниже - как я его понимаю, .big должен быть в три раза больше другого .flex-item. Как видите, не так. Почему?

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>

Ответ 1

Вы также должны указать значение для flex-basis (не указывая это свойство, чтобы поведение было похоже на использование начального значения, auto),

Добавьте flex-basis: 0; для обоих детей или просто установите его с помощью стенограммы:

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa

Ответ 2

Flex-grow обычно неправильно понимается таким образом. Flex-grow контролирует только то, как распределяется пространство слева от места между элементами гибкости, а не насколько они пропорциональны друг другу.

То, что вы ищете, действительно так:

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

См. также

Ответ 3

Авторы рекомендуют контролировать гибкость, используя сокращенную гибкость, а не с гибким выражением напрямую, так как стенография правильно сбрасывает любые неуказанные компоненты для общего использования.

https://drafts.csswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

Это рабочий пример

http://codepen.io/anon/pen/VjZYPV