Установка максимальной ширины для гибких элементов? ⇐ CSS

[Anonymous]

Я пытаюсь создать на своем сайте раздел фильтров, весь контент генерируется динамически (поэтому я не могу добавить к нему дополнительных родительских элементов), а наше руководство по стилю создает их с использованием гибких элементов. Я хотел бы сохранить эту функциональность по большей части.
Я хочу, чтобы мои три гибких элемента имели максимальную ширину и перемещались влево, а мой негибкий элемент располагался вправо, в общем контейнере, для которого установлена ​​максимальная ширина 1080 пикселей, примерно так:

Код: Выделить всё

Option 1    Option 2    Option 3                                    Non-flex Item

Я пробовал установить значения flex-align и следовать этому ответу, но, похоже, это не работает.
На данный момент я работаю с этим кодом:

Код: Выделить всё

.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
box-sizing: content-box;
}

.child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
}

Код: Выделить всё

[list]
[*]One
[*]Three
[*]Three

I'm not a flex item

[/list]

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

Подробнее здесь: https://stackoverflow.com/questions/477 ... flex-items