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

Question

我有这样的引导布局：

<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：https://jsfiddle.net/b12ybxpm/

Answer 1

  

我基本上想要右栏来指示左栏的高度。

尝试添加此内容：

.row {
     display: flex;
}

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

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

将display: flex添加到.row，.row - 左列和右列的子项（展示项）将automatically have equal heights。

但是，flex项目的子项 - 在这种情况下，可滚动内容和内容块 - 不是弹性项目，并且没有理由拉伸以填充其容器。

因此，将display: flex应用于父母，然后父母将孩子转换为弹性项目，默认情况下，他们会伸展以填充他们的容器。

由于看起来你正在column方向工作，所以给每个孩子一个flex: 1，这样他们就知道要向那个方向伸展。

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

考虑到所有嵌套的div，在你的小提琴中发布的代码有些复杂。

使用所有这些嵌套的div，我的代码很可能无法正常工作，因为它基于您发布的图像（而不是之后发布的实际代码）。

为了使用flexbox在演示中达到相同的高度（不需要JS），您需要使每个嵌套的div成为一个Flex容器。

这是您的演示版，修订版：https://jsfiddle.net/b12ybxpm/4/