css中子元素怎样撑满父元素（在父元素也为百分比的情况下）

Question

如图，当子一行中其中一个div高度变大时，怎么让其他div跟随这个div的高度也变大。

贴一段css代码

.listTr {
      height: 100%; //当这里设置成具体高度时，其他的小div可以撑满，但是百分比就不行。
      position: relative;
      background-color: white;
      @wid: calc(~"100% - 115px");
      width: calc(~"@{wid} / 7");
      display: inline-block;
      vertical-align: middle;
      div {
        height: 100%;
        padding: 5px 0 10px 10px;
        min-height: 75px;
        span {
          background-color: #408ee6;
          width: calc(~"50% - 10px");
          margin-right: 10px;
          margin-top: 5px;
          display: inline-block;
          color: white;
          text-align: center;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          border-radius: 6px;
          height: 36px;
          line-height: 36px;
        }
      }
    }

本人css比较水，求教有没有纯css的方法可以做到，谢谢~

Answer 1

自己解决了。

父级元素设置

 display: flex;
 align-items: stretch;
 

子级元素

flex:1

Answer 2

应该用js控制吧，css动态改变样式有些力不从心

Answer 3

使用 display table 即可解决