Preciso criar dinamicamente uma tabela para armazenar alguns dados.
Eu segui a abordagem usual de usar divs comdisplay: table, display: table-row edisplay: table-cell:

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}

<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

Ou visualize no Jsfiddle.

Na maioria dos navegadores, recebo a saída esperada:

No entanto, no IE8 (e possivelmente nas versões posteriores, não testei versões posteriores), recebo o seguinte:

oheight: 100% situado na div envolvente"Conteúdo" é ignorado.

De acordo comEu posso usar, O IE8 deve oferecer suporte completo às propriedades de exibição relacionadas.

Examinei uma série de perguntas semelhantes sobre SO sem encontrar uma solução funcional: a maioria das soluções depende de Javascript (que estou procurando evitar), usa uma altura fixa (ibid anterior) ou não funciona no IE8.