table表格div高度完全充满td

<div class="content">
    <table class="business-table">
      <thead>
        <tr>
          <th>业务项目</th>
          <th>评价类别</th>
          <th>主要评价内容</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in contentList" :key="index"  :class="{ 'selectActive': item.parentId == secondId }">
          <td>
            <div class="project-name">{{ item.projectName }}</div>
            <div class="emphasis">{{ item.emphasis }}</div>
          </td>
          <td>{{ item.reviewCategory }}</td>
          <td>
            <div class="content-list">
              <div class="clistItem" :class="{ 'selectActive': item.parentId == secondId }"
              v-for="(i,r) in item.reviewContent" :key="r" >{{ i }}</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

.content {
  height: 100%;
  flex: 1;
  padding: 10px;
  background-color: #f0f5ff;
  border-radius: 8px;
}

.business-table {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.business-table th,.business-table td{
  border-radius: 5px;
}
.business-table thead th {
  background-color: #5273E1;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  &:first-child {
    width: 30%;
  }
  &:nth-child(2) {
    width: 15%;
  }
  &:last-child {
    width: 55%;
  }
}
.business-table tbody tr {
  height: 100%;
}
.business-table tbody tr {
  background-color: #CDE3F6;
  height: 100%;
}
.business-table tbody td {
  padding: 10px;
  color: $txtColor;
  height: 100%;
}
.business-table tbody tr td:nth-child(2) {
  text-align: center;
}
.business-table tbody tr td:nth-child(3) {
  padding: 0px;
  // height: 1px;
  background-color: #fff;
}
.business-table tbody td .content-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.business-table tbody td .content-list .clistItem {
  flex-grow: 1;
  margin-bottom: 2px;
  background-color: #CDE3F6;
  padding: 4px 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  &:last-child {
    margin-bottom: 0;
  }
}

.business-table tbody tr.selectActive,
.business-table tbody td .content-list .clistItem.selectActive {
  background-color: #F2D993;
  transition: background-color 0.3s ease;
}
.business-table tbody tr .project-name{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  
}
.business-table tbody tr .emphasis{
  color: #5D7ADC;
}

某个需求要求实现特定的视觉效果，试了很多种方法设置div的高度充满td，有一种给td设置height：1px,content-list设置height：100%，在谷歌，edge，360等都是正常显示，但是火狐样式还是有问题，最终实现方式为，给表格容器，表格，tbody，tr，td都设置了height：100%；解决在火狐中高度显示的问题。