CSS3: 'display: flex' para simular 'height: 100%' dentro de um container

O atributo 'height: 100%' nem sempre se comporta como gostaríamos que se comportasse. Por exemplo, não dá pra fazer com que um div que é o último nó dentro de um container ocupe o espaço restante. No CCS3 a coisa ficou bem mais fácil: existe a marcação 'display: flex', que quando aplicado à um container, faz com que seus filhos imediatos se transformem blocos dentro do container. Abaixo segue um exemplo. HTML:

<div id="container">
    <div>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
    </div>
<div>

HTML:

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#container {
    height: 100%;
    width: 100%;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

#container > * {
    border: 1px solid black;
    margin: 0px;
}

#container > *:first-child {
    flex: 1;
    overflow-y: auto;
}

JSFiddler: http://jsfiddle.net/e8n3hLmg/3/


Obs:

• para o scroll funcionar, foi necessário aplicar o atributo 'min-height' no container. Sem isso o scroll não funcionaria. no Stack Overflow (http://stackoverflow.com/a/28639686) tem uma resposta que explica o porquê.