怎样让div1和div2的高度随着div3的高度增加呢？

有一个div3时div3在div2和div3里面有两个div3时怎样让div1和div2也随着div3的高度也增加呢？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{margin:0;padding: 0;}
    html,body{height:100%;width:100%;}
    #div1{background-color: blue;height: 100%;width: 100%}
    #div2{background-color: red;height: 100%;width: 60%;}
    .div3{width: 10%;height: 500px;background-color: yellow}
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div class="div3"></div>
        <div class="div3"></div>
    </div>
</div>
</body>
</html>

html css