Html CSS表格设置最大行高

我试图设置css表中单元格的最大高度。有几个堆栈溢出线程建议创建一个内部div并在那里设置最大高度。问题是，这似乎不适用于大字体：

<div class="table">
  <div class="table-cell">
    <div class="table-cell-inner">Test</div>
  </div>
  <div class="table-cell">
    <div class="table-cell-inner big">Test</div>
  </div>
</div>

.table {
  display: table;
  border-spacing: 10px;
  width: 300px;
}
.table-cell {
  display: table-cell;
  height: 50px;
  background: yellow;
}
.table-cell-inner {
  height: 50px;
  max-height: 50px;
  overflow: hidden;
}
.big {
  font-size: 50px;
}

试验
试验
.桌子{
显示：表格；
边界间距：10px；
宽度：300px；
}
.表格单元格{
显示：表格单元格；
高度：50px；
背景：黄色；
}
.表单元格内部{
高度：50px；
最大高度：50px；
溢出：隐藏；
}
.大{
字体大小：50px；
}

小提琴：

大类使用50像素的字体大小设置单词测试的样式，并生成一个大于允许值的表格单元格。我怎样才能解决这个问题<代码>位置：绝对似乎是一个解决方案，但这似乎是一个丑陋的修复

change your css bit according to the below snippet 

.table{
显示：表格；
边界间距：10px；
宽度：300px；
}
.表格单元格{
显示：内联块；
背景：黄色；
/*宽度：20px*/
最大高度：50px；
右边距：10px；
}
.表单元格内部{
高度：50px；
溢出：隐藏；
/*最大宽度：90px*/
显示：内联块；
线高：50px；
}
.大{
字体大小：50px；
}

试验
试验
参考：这是50px的高度。

问题是，当你在CSS中伪造一个表时，元素并不是都具有一个真正的表所具有的所有属性。如果将其重写为一个真实的表，那么问题就不存在了

表格{
边界间距：10px；
宽度：300px；
}
运输署{
高度：50px；
背景：黄色；
}
.表单元格内部{
高度：50px；
最大高度：50px；
溢出：隐藏；
}
.大{
字体大小：50px；
}

试验
试验
参考：这是50px高度。

这仍然不是

50px

。