看起来你必须实现一种Javascript方法。我的方法是获取.legs的高度，然后将其应用于.flight_no和.price。
我能想到的唯一其他选择是通过给.flight一个背景图像来“伪造它”，该背景图像将包括你的左列和右列在样式上不同，然后在你的CSS中包含repeat-y。如果这样做，侧边栏实际上不必跨越相同的高度。
使用jQuery，可以动态地将侧边栏设置为中间列的高度。

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

编辑：
时代变了-- jQuery不再是曾经的主宰，我们欢迎Flexbox来到这个世界。有关基于色谱柱的解决方案，请参见此SO页：
CSS - Equal Height Columns?

将div扩展到正确的高度，或者说容器的100%高度，你必须将height:100%链接到具有固定高度的容器，或者使用另一个height: 100%;链接到body。从长远来看，您可能需要此解决方案。
由于没有固定的高度，我使用了height: 100%并将其链接到html的主体。

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

Demo
为了给侧边栏给予容器的精确高度，你要么使用固定高度，要么使用javascript。

使用css *display：表 * 将为此工作。不需要在JS中使用。

.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
}

<div class="col-container">
    <div class="col">
        a lot of stuff here
     </div>
    <div class="col">
        a little bit of stuff here but its cool because 
        im the same size as my sibling element now due to
        display: table
    </div>
</div>