Twitter bootstrap 强制列中的内容在多个断点上具有相同的高度

我有这样一个引导布局：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div>
                This block should be the same height as the right column.
                The content in this block is in a scrollable container.
                The scrollable container currently has a fixed height set to allow scrolling.
            </div>
        </div>
        <div class="col-sm-6"></div>
            <div>Block 1 content</div>
            <div>Block 2 content</div>
    </div>
</div>

此块的高度应与右栏的高度相同。
此块中的内容位于可滚动的容器中。
可滚动容器当前具有允许滚动的固定高度设置。
第1区内容
第2区内容

当前桌面上的布局如下所示：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div>
                This block should be the same height as the right column.
                The content in this block is in a scrollable container.
                The scrollable container currently has a fixed height set to allow scrolling.
            </div>
        </div>
        <div class="col-sm-6"></div>
            <div>Block 1 content</div>
            <div>Block 2 content</div>
    </div>
</div>

当我切换到较小屏幕大小的断点时，布局将更改为：

我希望滚动区域的高度与右侧的两个内容块相同。我尝试在行上使用

display:flex

，但是如果我从可滚动区域中删除指定的高度，它将显示可滚动区域的全部内容，这不是我想要的

我基本上希望右栏指示左栏的高度

目前，我正在使用JavaScript来调整大小，但如果可能的话，我希望在CSS中这样做

JsFiddle：

我基本上希望右栏指示左栏的高度

尝试添加以下内容：

.row {
     display: flex;
}

.left-column,
.right-column {
     display: flex;
     flex-direction: column;
}

.left-column > *,
.right-column > * {
     flex: 1;
}

---

通过将

display:flex

添加到

.row

，将显示

.row

的左列和右列的子项（flex项）

但是，flex项的子项（在本例中为可滚动内容和内容块）不是flex项，因此没有理由拉伸以填充其容器

因此，对父项应用

display:flex

，然后将子项转换为flex项，默认情况下，子项拉伸以填充其容器

因为看起来你是在一个

列

方向上工作，所以给每个孩子一个

flex:1

，这样他们就知道要朝那个方向伸展

---

更新（根据发布的新代码进行修订）

考虑到所有嵌套的div，在fiddle中发布的代码有点复杂

对于所有这些嵌套的div，我上面的代码很有可能不起作用，因为它基于您发布的图像（而不是稍后发布的实际代码）

为了在使用flexbox的演示中实现相同的高度（不需要JS），您需要将每个嵌套的div设置为flex容器

---

这是您的演示，修订版：

嗨，Michael，我已经添加了额外的display:flex，但我仍然有一个问题，当我删除固定高度时，左列中的内容会不断增长，直到适合滚动列表中的所有内容。您能发布完整的代码吗？或者提供一个现场演示或站点来查看？添加了到JSFIDLE的链接。谢谢，这非常有用！为这些误导性的图片道歉。完成后，还原了这些图片。