Display Table Height Not Always Respected

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?

Solution 1:

Table cell and table heights are only initial recommendations. The same thing to a degree happens with width. If the content of the words can't shrink any further in width the table will grow to fit.

Think of it as a min-height when used on table styled elements.

If you are wanting the content inside to have a maximum height you will want to set the height and overflow, etc. on the final child span inside.

Solution 2:

Because you're emulating a table using <div> and <span> elements you're inheriting some browser CSS styles, namely line-height.

Define a font-size equal to the height of the table, then set the line-height of the child elements to 1em.

.table {
    border: 1px solid red;
    box-sizing: border-box;
    display: table;
    height: 15px;
  }
  .cell {
    height: inherit;
    border-width: 0;
    display: table-cell;
    box-sizing: border-box;
    line-height: 15px;
  }
  .cell span {
    display: inline-block;
    width: 31px;
    line-height: 15px;
  }

<div class="table">
    <span class="cell">
      <span>test1</span>
    </span>
    <span class="cell">
      <span>test2</span>
    </span>
  </div>

Solution 3:

display: table works the same way as the <table> element.

The height of a <table> is determined by the height of its cells.

If you were to change .table's display attribute to block, .table's height would take effect.

.table {
  border: 1px solid red;
  box-sizing: border-box;
  display: block;
  height: 15px;
}
.cell {
  height: 75px;
  border-width: 0;
  display: table-cell;
}
.cell span {
  display: inline-block;
  width: 31px;
}

<div class="table">
  <span class="cell">
      <span>test1</span>
  </span>
  <span class="cell">
      <span>test2</span>
  </span>
</div>