Flexbox: Как объединить проценты, пиксели и оставшуюся высоту по столбцам?

Question

Я строю базовую систему сетки и мне нужно объединить высоту гибких элементов, описанных в единицах разного размера, которые составляют%, px и оставшееся пространство.

HTML:

<div class="grid"> 
    <div class="block" style="flex-basis: 50px;">50px</div> 
    <div class="block" style="flex-basis: 25%;">25%</div> 
    <div class="block">stretch to remaining space?</div> 
    <div class="block" style="flex-basis: 50px;">50px</div> 
</div> 

CSS:

html,body,.grid { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
.grid { 
    width: 300px; 
    background: #aaa; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 

} 
.block { 
    outline: solid 1px black; 
    flex-grow: 0; // remove growing proportion 
    flex-shrink: 0; // remove shrinking proportion 
} 

рабочий пример: http://codepen.io/antraxis/pen/zxwgEo

Answer 1

Используйте параметр flex-grow (первый в сокращенном собственности flex):

HTML:

<div class="grid"> 
    <div class="block a">block height 50px</div> 
    <div class="block b">block height 25%</div> 
    <div class="block c">block height *</div> 
    <div class="block d">block height 50px</div> 
</div> 

CSS:

.block { 
    outline: solid 1px black; 
} 
.a, .d { 
    flex: 0 0 50px; 
} 
.b { 
    flex: 0 0 25%; 
} 
.c { 
    flex: 1 0 0; 
} 

codepen