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ê.

Box com cantos arredondados

É melhor eu registrar esse código em algum lugar antes que eu precise procurá-lo pela 83ª vez...

Esse é um exemplo de como gerar box com cantos arredondados. Vale lembrar que é necessário ter as imagens dos cantos.

<div class="box_arredondado"> 
   <div class="borda_top"><div>&nbsp;</div></div>
   <div class="conteudo">
      Bla Bla Bla Wiskas Sachê
   </div>
   <div class="borda_bottom"><div>&nbsp;</div></div>
</div>

CSS:

div.box_arredondado {
   background-color: #FFFFFF;
   color: #000000;
   margin: 10px;
}

div.box_arredondado .conteudo {
   margin: 0px 15px;
   position: relative;
}

div.box_arredondado .borda_top div {
   background: url(top_le.gif) no-repeat top left;
}

div.box_arredondado .borda_top 
{
   background: url(top_ld.gif) no-repeat top right;
}

div.box_arredondado .borda_bottom div {
   background: url(base_le.gif) no-repeat bottom left;
}

div.box_arredondado .borda_bottom {
   background: url(base_ld.gif) no-repeat bottom right;
}

Como uma segunda opção, é possível gerar o HTML, CSS e as imagens para criar Box arredondados neste site: http://www.roundedcornr.com

CSS Inherit no IE6

A opção 'inherit' para o atributo 'font-size' do style de um <table> não funciona por padrão no IE. Para forçar o funcionamento, atribua '1em'. Isso força o table a herdar o valor do container.

<div sytle="font-size: 12px">
    <table style="font-size: 1em"><tr><td>
        Bla Bla Bla
    </td></tr></table>
</div>