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

Question

我有一个这样的 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>

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

当我切换到较小的屏幕尺寸断点时，布局会更改为:

我希望可滚动区域与右侧的两个内容 block 具有相同的高度。我曾尝试在该行上使用 display: flex，但如果我从中删除指定的高度，它会显示可滚动区域的全部内容，这不是我想要的。

我基本上希望右列决定左列的高度。

目前我正在使用 JavaScript 来调整大小，但理想情况下我希望尽可能在 CSS 中执行此操作。

JsFiddle:https://jsfiddle.net/b12ybxpm/

Answer 1

I basically want the right column to dictate the height for the left column.

尝试添加这个:

.row {
     display: flex;
}

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

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

---

通过将 display: flex 添加到 .row，.row 的子项( flex 项)——左列和右列——将automatically have equal heights .

但是， flex 元素的子项(在本例中为可滚动内容和内容 block )不是 flex 元素，没有理由拉伸(stretch)以填充其容器。

因此，将 display: flex 应用于父级，然后将子级转换为 flex 元素，默认情况下它们会拉伸(stretch)以填充其容器。

因为看起来您是在列方向上工作，所以给每个 child 一个flex: 1，这样他们就知道朝那个方向拉伸(stretch)。

---

更新(根据问题发布的新代码进行修订)

考虑到所有嵌套的 div，您的 fiddle 中发布的代码有些复杂。

对于所有这些嵌套的 div，我上面的代码很可能无法工作，因为它基于您发布的图像(而不是稍后发布的实际代码)。

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

这是您的演示，已修改:https://jsfiddle.net/b12ybxpm/4/