Css 等高面板？

我试着在右边做一个面板，左边两个面板的高度相等，两个面板相互重叠

像这样：

我曾尝试使用.row eq height css，但它不会拉伸面板本身

<!--  Row #2 -->
    <div class="row">
        <div class="container row-eq-height">
            <div class="col-md-4">
                <!--  Information panel -->
                <div class="panel panel-default -->">

                    <div class="panel-heading">
                        <p class="panel-title">Information</p>
                    </div>

                    <div class="panel-body">
                        <h4 id="numVal">Value: 0</h4>
                    </div>

                </div>

                <!--  Secondary box -->
                <div class="panel panel-default secondPanel">
                    <div class="panel-heading">
                        <p class="panel-title">Box2</p>
                    </div>

                    <div class="panel-body">
                    </div>
                </div>
            </div>

            <!--  Main panel -->
            <div class="col-md-8">
                <div class="panel panel-default mainPanel">
                    <div class="panel-body">

                    </div>
                </div>
            </div>

        </div>
    </div>

信息
数值：0
第2栏

我对这一切还不熟悉，所以请容忍我！我非常感谢你的帮助！谢谢大家!

---

编辑：CSS：对不起，我以前没有包括它

我对它进行了一些调整，并在外部容器中添加了display:flex。这似乎正是你想要的

<div class="row">
    <div class="row container-fluid" style="display:flex">
        <div class="col-md-4">
            <!--  Information panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <p class="panel-title">Information</p>
                </div>
                <div class="panel-body">
                    <h4 id="numVal">Value: 0</h4>
                </div>
            </div>
            <!--  Secondary box -->
            <div class="panel panel-default secondPanel">
                <div class="panel-heading">
                    <p class="panel-title">Box2</p>
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>
        <!--  Main panel -->
        <div class="panel panel-default mainPanel col-md-8">
            <div class="panel-body">

            </div>
        </div>
    </div>
</div>

信息
数值：0
第2栏

您可以使用Flexbox属性匹配高度。 以下是我认为您正在尝试的：

---

另外，这里有一个开始使用Flexbox的好方法：

请包含您的CSS，这样我们可以更好地帮助您。现在添加，抱歉！只要再问一个问题，如果你不介意的话！从右边看，主面板的宽度略高，但其他两个面板是相同的，这是怎么发生的？我的版本也一样。所以可能有两个原因。事实上，左侧面板嵌套在另一个div中，而右侧面板不是，或者您有一些css影响它。我建议使用开发者工具（F12）来了解差异所在。无论如何，习惯这些工具是个好主意。主面板{margin right:15px；}对我来说已经足够好了，我想，谢谢你的帮助！：）

.row-eq-height{
  display: flex;
}
.take-up-space{
  flex:1;
}

.flex-column{
  display: flex;
  flex-direction: column;
}