CSS：如何让child1与child2具有相同的高度？

Question

我有2个元素，我希望第1个元素的高度等于第2个元素的高度（此高度可以变化，因为此元素可以包含图片或视频......）。

我尝试将它们封装在同一容器中，并将float:left属性设置为子1，以便容器的高度等于子2（因为浮动元素不会将高度添加到容器）。 容器的高度是好的（等于子2的高度），但我仍然不能让子1的高度等于其容器的高度。

你可以看到这是小提琴（我希望黄色部分包含在绿色边框内，并且滚动条出现在黄色部分......不使用JavaScript）：
 JSFiddle

<div id='container'>
    <div id='child1'>
        test1<br>test1<br>test1<br>test1<br>test1
    </div>
    <div id='child2'>
        test2<br>test2<br>test2
    </div>
</div>

#container{
    border:green solid 5px;
}

#child1{
    float:left;
    background:yellow;
    overflow-y:auto;
}

#child2{
    background:blue;
}

感谢您的帮助！
专利

Answer 1

<强> LIVE DEMO

#container{
    position:    relative;  /* needed */
    border:      green solid 5px;
}

#child1{
    position:    absolute;  /* needed */
    background:  yellow;
    overflow-y:  auto;
    height:      100%;      /* fit parent */
    width:       20%;       /* note */
}

#child2{
    margin-left: 20%;       /* note*/
    background:  blue;
}

Answer 2

你的意思是孩子1继承的容器价值？如果是，则子项1的值应为height: inherit;