html5,css_怎么让这个父div的高度始终跟子div的高度一样？，html5,css

怎么让这个父div的高度始终跟子div的高度一样？

比如有个通过js控制的按钮每次点击按钮都让子div高度增加50px 我想让父元素也自动跟着增加50px 这个有办法吗？

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
  #div1{width: 200px;height: 200px;background-color: blue;}
  #div2{width: 100px;height: 200px;background-color: red;}
  </style>
</head>
<body>
<div id="div1">
  <div id="div2"></div>
</div>
</body>
</html>

#div1{width: 200px;min-height: 200px;background-color: blue;}

别设div1的高度就行了