Assurez-vous que le conteneur de la cellule du tableau remplit toute la hauteur du parent
J'ai essayé d'aligner verticalement le contenu sans utiliser Flexbox, car il y avait quelques problèmes avec notre cas d'utilisation, j'ai donc essayé d'y parvenir en utilisant un tableau aligné verticalement, mais le problème est que le contenu à l'intérieur ne remplit pas la hauteur restante, c'est est-il possible de le faire via CSS. Une manière de faire cela ?
https://jsfiddle.net/s38haqm5/25/
<html>
<body>
<div class="row">
<div class="cell">
<div class="container">
Hello world
</div>
</div>
<div class="cella">
Cell2
</div>
</div>
</body>
</html>
.container {
background-color: red;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
min-height: auto;
max-height: none;
}
.cella {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
height: 30px;
max-height: none;
}
.row {
display: table
}