Estouro de célula de tabela CSS é ignorado pelo FF e Opera

Question

Oct 08, 2012, 11:06 AM

Estouro de célula de tabela CSS é ignorado pelo FF e Opera

Eu tenho uma tabela CSS de três linhas, que é aninhada em um div de tamanho fixo. A tabela tem três linhas, a altura das duas primeiras linhas é definida pelo conteúdo (não posso fornecer tamanhos explícitos) e a última linha simplesmente pega o que resta. A última linha tem um único filho, que é um div, tendo cargas de filhodivs comdisplay: inline-block. O problema que eu tenho é - eu o div é sempre transbordado e eu quero que ele exiba uma barra de rolagem vertical, que só acontece emChromium. FF e Opera simplesmente ignoramoverflow-y:scroll e deixar o conteúdo acabar (eu acredito que o IE é o mesmo, eu simplesmente não o tenho). Gostaria de saber se o problema pode ser resolvido sem o uso de javascript e se sim como.

Não me importo de usarHTML5 única solução, desde que seja suportada pelas versões recentes de todos os navegadores.

Atualização 1 - Só queria deixar claro - não posso usar tamanhos explícitos para nenhuma das linhas, pois eles hospedam controles de altura desconhecida.

<html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="height: inherit; overflow-y: scroll">
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>