I have the code below. For some reason when the table height is smaller than the height of the cells, the height is not respected. Why is that?
.table {
border: 1px solid red;
box-sizing: border-box;
display: table;
height: 15px;
}
.cell {
height: inherit;
border-width: 0;
display: table-cell;
}
.cell span {
display: inline-block;
width: 31px;
} <body>
<div class="table">
<span class="cell">
<span>test1</span>
</span>
<span class="cell">
<span>test2</span>
</span>
</div>
</body>
