I tried to vertically align the content without using Flexbox, because there were some problems with our use case, so I tried to achieve it with a vertically aligned table, but the problem is that the content inside is not filling the remaining height, is it possible to pass CSS does this somehow?
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
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need to define the parent height. Now your
.celldoesn't have any height set, so.containerdoesn't have any value to calculate 100% from. Just add some height to.cell, like.cell {height: 30px;}(Just like you did on.cella.)Since
.cellaand.cellare the same, I'm assuming you might want this bit of advice. If you want the cells to be the same but one of them needs to be styled differently, add the same class on all cells and then add the id to the cell that needs to be different and then style the id as you want . Remember that a cell with class and id will have a css value that is the combination of class and id