Html 使儿童div达到最大高度

我正试图使

.box content

div

达到boxA/boxB

div

内的最大高度。我在boxA/boxB

div

中得到了一个

div

.box标题和一个

.box内容

。

.box内容

与

.box标题

共享一个

div

在这里，您可以看到

.box内容

超出了它的父

div

考虑到以下两条规则，我如何使用纯CSS解决这个问题：

.box内容的高度可拉伸（增长/收缩
当窗口大小改变时）
.box内容的最小高度为200px
您面临的问题是：

.box content
设置为其父项的100%，但也有
.box header
位于父项内部，因此
.box content
被按下并溢出（大小为
.box content
），以保持其父项的100%高度

我可以建议如下：

.box-content { height: 90%; }

.box-header {
    position: relative;
    background-color: green;
    padding:11px 8px 5px;
    color: white;
    height:10%;
}

查看此
您可以将父div设置为在子div具有更大高度的情况下可滚动

.boxA{overflow:auto；}
.boxB{overflow:auto；}
如果
溢出
是一个选项（我觉得它让你的生活在这里变得轻松），那么下面是一个

保持HTML不变，您的css（2行更改）如下

我不明白包括引导程序而不使用它的意义。
.container
来自引导程序：）更新了小提琴（忘记了干扰响应高度的昏迷），我知道，但这是为了说明我试图实现的目标：D不得不说需要修复标题。一个可伸缩的头球看起来很难看。谢谢你的帮助+1请给我一点时间让它工作起来。有别的东西把事情搞砸了。谢谢
.boxA {
    width: 220px;
    padding: 0px 3px 5px 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
    border: solid 1px green;
    overflow:hidden; /*added this*/
}

.boxB {
    width: 420px;
    padding: 0px 5px 5px 3px;
    float: right;
    height: 100%;
    border: solid 1px red;
    overflow:hidden;/*added this*/
}