css - CSS:如何使child1与child2的高度相同？

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

我试图将它们封装在同一个容器中，并将float:left属性设置为child 1，以使容器的高度等于child 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;
}

谢谢您的帮助！
拍

最佳答案

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;
}

关于css - CSS:如何使child1与child2的高度相同？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19908384/