[Résolu] Avoir une grille de x*y divisant tout le viewport sans Flexbo

J'essaie d'avoir une grille qui prends tout le viewport, où toutes les cellules ont les même dimensions et se partagent équitablement toute la largeur et la hauteur du viewport.

Comme je dois afficher une grille de x * y où x et y peuvent aller jusqu'à 20, j'aimerais éviter d'avoir à utiliser les largeurs/hauteur en pourcentages divisés (100/2=50%, 100/3=33.33%, 25%, 20%, 16.67%, 14.29%, 12.5%, etc.)

(Petite) contrainte: Le code doit fonctionner sur Opera 12.00, qui ne supporte pas Flexbox CSS3.

Je n'ai pas vraiement besoin de lignes/colonnes: ça pourrait très bien être de simples <div> qui float en ligne

Voilà ce que je vise, en Flexbox :

HTML :

<div id="matrix-container">
	<div class="matrix-row">
		<div class="matrix-cell"><div class="matrix-cell-content">1x1</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">1x2</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">1x3</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">1x4</div></div>
	</div>
	<div class="matrix-row">
		<div class="matrix-cell"><div class="matrix-cell-content">2x1</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">2x2</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">2x3</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">2x4</div></div>
	</div>
	<div class="matrix-row">
		<div class="matrix-cell"><div class="matrix-cell-content">3x1</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">3x2</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">3x3</div></div>
		<div class="matrix-cell"><div class="matrix-cell-content">3x4</div></div>
	</div>
</div>

CSS :

body {
    margin: 0;
}
#matrix-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.matrix-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
}

.matrix-cell {
    flex: 1;
    display: flex;
    border: 1px solid grey;
}
.matrix-cell-content {
    flex: 1 1 0;
}

Demo : https://jsfiddle.net/Ly38bsrr/

Est-ce que c'est réalisable sans Flexbox ? Ou alors existe-t-il un genre de hack JavaScript pour rajouter le "support Flexbox" (au moins partiellement) au navigateur ?

Merci (j'avais même tenté le <table> ), par contre je n'ai pas précisé que j'aimerais que le contenu (de taille assez variable) des cellules ne doit pas les faire changer de taille...

J'ai donc rajouté un

#matrix-container {
    table-layout: fixed;
}

Ce qui fonctionne tant que le contenu (du texte) reste sur une seule ligne : s'il devient trop long pour la largeur de sa cellule, il "wrap" (ce qui est désiré : à moi d'avoir des cellules suffisamment hautes ou larges pour le contenu que j'y colle) mais la haute de la cellule augmente (ce qui n'est pas désiré) alors même qu'il y avait de la place pour cette nouvelle ligne de contenu.

Je n'arrive pas à le "figer".

Parfait : merci