CSS Flexbox-当一列包含多个部分时，高度相同？

我有一个简单的问题。我有一个基本的弹性盒布局。一列占据布局的2/3，另一列占据第三列。它们都有一个紫色半透明的标题（.85），其内容位于不透明的黑框中

正文{
背景：url（'http://www.amazingwallpaperz.com/wp-content/uploads/Black-and-Purple-Abstract-Cool-Backgrounds-Wallpaper.jpg""中",；
背景尺寸：封面；
字体系列：“开放式SAN”；
}
#功能侧，#功能侧img{
宽度：100%；
最大宽度：800px；
保证金：0自动；
}
.集装箱{
显示：-webkit flex；
显示器：flex；
证明内容：之间的空间；
颜色：#fff；
}
门派{
框大小：边框框；
宽度：32%；
-webkit-flex:1；
弹性：1；
边距：30px；文本对齐：居中；
}
.门派+.门派{
左边距：10px；
}
.sect.feat{宽度：65%；
-webkit-flex:2；
弹性：2；
}
.第节，续{
背景:#4141；
填充顶部：40px；
填充底部：30px；
边界半径：0 0 5px 5px；
}
.第h2节{
背景:#4141；
背景色：rgba（52,41109,85）；
页边距底部：0；
文本对齐：居中；
文本转换：大写；
字号：2em；
字体大小：300；
填充：30px 10px；
边界半径：5px5px0；
}

特邀嘉宾及；程序设计
新闻
一些激动人心的文章

您可以添加

弹性方向：列到你的
.sect
类，并给你的
.cont
类
flex grow:1
。这将使
.cont
div占据
.sect
类的剩余高度

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

.cont {
  flex-grow: 1;
}

您完全可以仅使用css来完成此操作。将以下内容添加到.sect属性：

overflow: hidden;
position: relative;
border-radius:5px;

并添加此项以使高度匹配：

.sect + .sect .cont::after {
  background: #414141 none repeat scroll 0 0;
  content: "";
  height: 3000px;
  left: 0;
  position: absolute;
  width: 100%;
}

您还应该能够从h2和.cont中取出边界半径。
您可以使用此javascript插件：。您不需要编写任何javascript，只需包含脚本并将
数据mh=“cont”
添加到每个
。你可能会有一个地狱的时间做这与cssonly@zgood是的，我正在考虑使用js来获取
.feat.cont
的内部高度，并使它们匹配，但幸运的是@Hunter Turner知道得更好。为此万岁：戴亚他的解决方案似乎是更好的办法。祝你好运最好的答案是你！非常感谢你，我发誓我试过了，但我不确定。不管怎样，谢谢你这么多帮助这个flexbox新手：哈哈，谢谢！没问题，很乐意帮忙！以下是我用于flexbox的资源：）