Bootstrap 3 - 我可以用css使右列与左列具有相同的高度吗？

Question

我在我的项目中使用 Bootstrap 3，并且有一排并排的两个面板。我想要实现的是使右侧面板与左侧面板具有相同的高度。

两列高度相同不是问题。正如您在下面提供的代码中看到的那样，它已经完成了。真正的问题是：

1. 左侧面板应适合内容。
2. 如果右侧面板的内容超出左侧面板的高度，则应显示滚动条。

现在问题来了：我想知道是否有任何纯 CSS 解决方案可以实现这一目标？请注意，左列的高度可以更改，因此为列分配固定高度不会解决问题。我已经尝试了几种不同的解决方案，但都没有奏效。

这是我当前的代码：

HTML

<div class="row flex-row">
  <div class="col-xs-6">
    <div class="panel panel-default flex-col">
      <div class="panel-body">
        Some<br><br>
        content
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel panel-default flex-col">
      <div class="panel-body">
        Some<br><br><br>
        longer<br><br><br>
        content
      </div>
    </div>
  </div>
</div>

CSS

.flex-row, .flex-row > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex: 0 auto;
    -webkit-flex: 0 auto;
    flex: 0 auto;
}

.flex-col {
    display: flex;
    display: -webkit-flex;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -ms-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;

    overflow-y: auto;
}

小提琴：

https://jsfiddle.net/g1u8u98g/2/

如果有任何帮助，我将不胜感激。

Answer 1

为右侧面板提供单独的类名，如 'rgt'

并在 CSS 中放置：

.rgt{
    height: 90px;
    overflow-y:  scroll;
}

如果没有必要，删除你已经完成的那些样式

Answer 2

给出单独的类并给出样式：

 .lft{
      height:100%;
     }
 .rgt{
      height:100%;
      overflow-y:scroll;
     }

然后添加脚本为：

<script>
    $('.rgt').css('height', $('.lft').height() + 'px');
</script>