适合父母Div到内容高达最大高度：100％;

Question

我的html中有以下结构：

<div id="parent1" class="col-sm-12 col-md-6" style="height: 100%;></div>
<div id="parent2" class="col-sm-12 col-md-6">
    <div id="child">
        <div id="childs_child"></div>
    </div>
</div>

类col-sm-12 col-md-6来自Bootstrap网格系统，并使两个#parent元素并排放置在大屏幕上。 #parent2和#child的大小自动调整为#childs_child的内容。问题是如果#childs_child内容很大，那么整个页面会滚动。如果#child内容很大，我希望#childs_child滚动。

我已尝试设置#parent2 { max-height: 100%; } #child { max-height: 100%; overflow-y: auto; }，但#child只是增长到适合#childs_child。

我有一种纯粹的CSS方法可以在#parent2或#child上设置特定高度来完成此操作，还是需要使用Javascript？我＆＃39;不想设置特定的高度属性，因为当#childs_child内容很小而且不需要滚动时，我希望#parent和#child缩小以适应而不是全高页面。