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：

OUTBOUND

{{departureFlight.departureTime | date:"EEE d MMM"}}

{{departureFlight.departureTime | date:"h:mma"}}

{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})

{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}h

{{departureFlight.arrivalTime | date:"EEE d MMM"}}

{{departureFlight.arrivalTime | date:"h:mma"}}

{{departureFlight.cityTo}} ({{departureFlight.flyTo}})

Connection change Long wait  ✈

{{departureFlight.departureTime | date:"h:mm"}} hours

INBOUND

{{returnFlight.departureTime | date:"EEE d MMM"}}

{{returnFlight.departureTime | date:"h:mma"}}

{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})

{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}h

{{returnFlight.arrivalTime | date:"EEE d MMM"}}

{{returnFlight.arrivalTime | date:"h:mma"}}

{{returnFlight.cityTo}} ({{returnFlight.flyTo}})

Connection change Long wait  ✈

{{returnFlight.departureTime | date:"h:mm"}} hours