Css flexbox justify-content: space-between; не работает

Многие кто только начинает верстать с использованием css flexbox зачастую сталкиваются со "странным поведением блоков", в частности с тем, что justify-content: space-between; не работает

Итак, дайте прикинем результат, который мы бы хотели получить:

и вариант, который получается:

Все дело в свойстве flex-grow установленном в любое значение отличное от 0.

Чаще эта проблема возникает при использовании которой записи flex: 1 1 150px; (первая единица). Т.е. верная запись, для данного примера будет flex: 0 1 150px;.

Также напомню, что flex-basis имеет приоритет перед height и width (в зависимости от того, как идет главная ось).

 
<div class="flex">
    <div></div>
    <div></div>
    <div></div>
</div>

 
.flex {
    display: flex;
    border: 1px solid blue;
    justify-content: space-between;
    padding: 20px;
}

.flex > div {
    border: 1px solid red;
    height: 200px;
    width: 1200px;
    flex: 1 1 150px;
}