css 自适应高度

想实现的是，div中包裹几个div，然后这里层的div高度是不定的，随着最高的div的高度一致展现。

 <div class="table_cell">
                            <div class="title-header">
                              <div class="table-title-cell">No.</div>
                              <div class="table-title-cell">检测内容</div>
                              <div class="table-title-cell">结果</div>
                              <div class="table-title-cell">结果信息</div>
                              <div class="table-title-cell">操作</div>
                            </div>
                
                            <div class="table-row" v-for="(sub_item,index2) in item.children" :key="index2">

                            <div class="show_sequence">
                              {{index2+1}}
                            </div>
      
                              <div class="show_content_div">
                                      <div class="operate_title">
                                        <span class="check-point-title">验证点</span>
                                        <span class="operate_desc">
                                            {{sub_item.name}}
                                        </span>
                                        </div>
                                      <div class="operate_title">
                                        <span class="check-point-desc">描述</span>
                                      <span class="operate_desc">{{sub_item.desc}}</span>
                                      </div>
                                      <div>
                                        <span class="check-point-expect">期望结果</span>
                                      <span class="operate_desc">{{sub_item.expect}}</span>
                                      </div> 
                                  
                              </div>

                              <div class="show_res_icon">
                                  <el-button type="success" v-if="sub_item.set_result_manual==1" icon="el-icon-check" @click="set_result(sub_item,1)" size="mini" circle></el-button>
                                  <el-button type="warning" v-if="sub_item.set_result_manual==2" icon="el-icon-close" @click="set_result(sub_item,0)"   size="mini" circle></el-button>
                                  <el-button type="info" v-if="sub_item.set_result_manual==0" icon="el-icon-question" @click="set_result(sub_item,0)"   size="mini" circle></el-button>

                              </div>
                            
                                <div class="show_result_div">
                                      
                                </div>
                                <div class="show_btn_div">
                                  <el-button type="text" @click="set_result(sub_item,1)" size="mini" class="select_icon"><i class="el-icon-check"></i>验证成功</el-button>
                                  <el-button type="text" @click="set_result(sub_item,2)" style="color:#E6A23C" size="mini" class="select_icon"><i class="el-icon-close"></i>验证失败</el-button>
                                </div>
                                </div>
                            </div>

采用的是 display：table  和display：table-cell的方式来控制自适应高度

.table_cell{
    display: table;
    width: 100%;
   }
   .show_res_icon{
     width: 10%;
     display:table-cell;
     background: #F2F6FC;
     border: 1px solid  white;
     text-align: center;
     vertical-align:middle;
   }   
.title-header{
     display:table-header-group;
     border: 1px solid #F2F6FC;

   }
   .table-row{
     display: table-row;
   }
   .table-title-cell{
     display: table-cell;
     text-align: center;
     vertical-align: middle;
   }
   .show_sequence{
     width: 10%;
     display:table-cell;
    text-align: center;
     vertical-align: middle;
     border: 1px solid #F2F6FC;
   }