使用AdminLTE实现嵌套容器下Card Body占满可用高度

我在使用AdminLTE框架时，需要让某特定页面里卡片的card-body部分拉伸至全部可用高度。页面存在大量无法删除的嵌套容器，HTML结构如下：

<div class="content-wrapper" style="min-height: 937px;">
    <div class="content-header">
        header 1
    </div>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        header 2
                    </div>
                    <div class="card-body">
                        <div id="mycontent">
                            content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

观察发现.content-wrapper的高度由JavaScript设置。默认状态下，.content-wrapper和.content的display属性为block，不会自动拉伸至满高；.row默认display属性为flex。

我需要让所有嵌套容器都拉伸，从而让#mycontent占用全部可用空间。尝试了以下CSS：

.content-wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: center;
}
.row,
.card {
    display: block;
}
.content-header,
.card-header {
    flex: 0 1 auto;
}
.content,
.card-body,
.col-md-12,
.card,
.row {
    flex: 1 1 auto;
    align-items: stretch
}

#mycontent {
    flex: 1 1 auto;
    text-align: center;
    min-height: 500px;
}

当前效果：

• 已拉伸至可用高度的元素：
  • .content-wrapper
  • .content
• 无法拉伸的元素：
  • .row及其所有子元素

疑问：问题是否出在<section>标签上？该如何最优实现需求？

更新：可行解决方案

.content-wrapper {
    height: 100%;
    width: calc(100% - 250px); /* 适配侧边栏宽度 */
    display: flex; flex-flow: column wrap; /* 作为父级弹性容器 */
    flex: 1;                               /* 作为子级弹性项 */
}
.content-header,
.card-header {
    flex-flow: row wrap; 
    flex: 0
}
.content,
.row,
.col-md-12,
.card,
.card-body,
#mycontent {
    display: flex; flex-flow: column wrap; /* 作为父级弹性容器 */
    flex: 1;                               /* 作为子级弹性项 */
    width: 100%;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

内容的提问来源于stack exchange，提问作者Valentino