Display: flex — может ли один из контенеров занимать все оставшееся пространство?

Question

[Александр Флоринский]

Есть необходимость сделать блок, в котором в любом порядке могут размещаться блоки в одну линию.
Некоторые из этих блоков имеют фиксированную ширину, а один должен занимать все оставшееся пространство.
Можно ли реализовать такое с помощью flexbox ?

<div style="width: 90%">
    <dix style="width: 150px;"></dix>
    <dix>Этот блок должен занимать все оставшееся пространство между двумя блоками</dix>
    <dix style="width: 300px;"></dix>
</div>

Ширина крайних блоков может меняться, как и ширина родительского контейнера.

Comments

[Lynn «Кофеман»]

Может. Ботать https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Виктория Ясинюк]

Попробуйте так (и не diX, а diV):

<div style="width: 90%">
    <div style="min-width: 150px;"></div>
    <div style="width:100%">Этот блок должен занимать все оставшееся пространство между двумя блоками</div>
    <div style="min-width: 300px;"></div>
</div>

Answer 1

[Dvorak]

Используйте flex-grow. О его применении посмотрите здесь https://habrahabr.ru/post/242545/