Ambas as tabelas têm altura definida para 50 px e seu conteúdo não está excedendo. Mas a tabela com legenda é na verdade 70 px, porque a legenda não parece ser incluída no cálculo de altura da tabela.

Alguém pode explicar o racional para não incluir a legenda no cálculo da altura da tabela?

Afinal, é um filho da mesa. E se você quiser excluí-lo da altura da tabela, coloque apenas a legendalado de fora a mesa se você não a quisesse incluída.

.table {
  display: table;
  height: 50px;
}
.table-caption {
  display: table-caption;
  background-color: red;
  height: 20px;
}
.table-row {
  display: table-row;
  background-color: green;
}
.table-cell {
  display: table-cell;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">table height is 50px</div>
  </div>
</div>

<br>
  
<div class="table">
  <div class="table-caption">caption</div>
  <div class="table-row">
    <div class="table-cell">table height is 70px</div>
  </div>
</div>