html自动获取高度,HTML CSS自动调整高度

我试图通过使用CSS / LESS可视化来显示出站和入境航班.问题是当出境航班有更多的机场变更时,入境然后线路保持在第一个航班的水平.我希望根据最长的路线动态调整行高.

你能帮我弄清楚如何达到要求的结果吗？

更新：准备Plunker示例(使屏幕更宽,以便正确看到它)

这就是我所拥有的：

这就是我想要的：

减：

.time-slice {

position: relative;

display: -webkit-Box;

display: -webkit-flex;

display: -ms-flexBox;

display: flex;

-webkit-Box-align: stretch;

-webkit-align-items: stretch;

-ms-flex-align: stretch;

align-items: stretch;

margin-left: 20px;

}

.time-slice > * {

padding: 20px;

}

.circle {

width: 16px;

height: 16px;

Box-sizing: content-Box;

border-color: #29a8bb;

background: #ffffff;

border-radius: 32px;

display: block;

border: 2px solid blue;

}

.circle-wrap {

position: absolute;

top: 0px;

left: 91px;

z-index: 2;

}

.circle-wrap > .circle {

position: relative;

left: 20px;

}

.date-time {

Box-sizing: content-Box;

-webkit-flex-shrink: 0;

-ms-flex-negative: 0;

flex-shrink: 0;

-webkit-flex-basis: 100px;

-ms-flex-preferred-size: 100px;

flex-basis: 100px;

text-align: center;

margin-top: -5px;

}

.date,.time {

max-width: 90px;

color: #999999;

font-size: 13px;

margin-top: 0px;

margin-bottom: 10px;

margin-left: 20px;

}

.time-slice.row:not(:last-child) .point-title {

border-left: 2px solid blue;

padding-left: 15px;

padding-top: 0;

position: relative;

top: 20px;

}

.duration {

margin-left: 50px;

max-width: 90px;

color: #999999;

font-size: 13px;

margin-bottom: 10px;

}

.stop-transit {

border-width: 2px;

color: red;

padding-left: 5px;

margin-left: 20px;

margin-bottom: 10px;

table-layout: fixed;

}

.stop-transit,.transit-path,.wait-time{

padding-right: 10px;

padding-left: 20px;

}

.transit-path {

border-right-style:dotted;

width: 140px;

}

.wait-reason{

text-align: center;

}

.searchResult{

padding: 0px 15px;

}

HTML：