如何动态的实现子元素Div的大小随着父元素Div的大小改变而改变

[bandaoyu]

问题背景：
看了这文章：http://blog.csdn.net/dqs78833488/article/details/51392833（24行代码，让你的网页元素任意放大、缩小、拖拽、移动 ）
我也做了一个，



#box {
width: 50px;
height: 50px;
background: #333;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
}


#box {
width: 50px;
height: 50px;
background: #333;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
}


<div id="box">
<div id="coor"></div>
</div>



但是因为我后面的代码中有js在<div id="box"></div>内 画图 （js图库的echart）：
var myChart = echarts.init(document.getElementById("box"),theme.name);
myChart.setOption(option);

这样执行之后就会覆盖掉了 <div id="coor"></div> 导致画面中没有那个拖拽的红点。

所以我就在外面加了一个div

</div id=“outer”>
<div id="box" style=“height：100%;with：100%；”>
</div>
<div id="coor"></div>
<div>

这样画图就在box中画，小红点依旧在右下角。这时我拖动 outer，大家都一起移动，OK满足预期。然后拉动 小红点放大，outer放大了，可是box依旧没有变化。

如何才能实现 子级的 div的大小动态的和父级div的大小一致呢？

也就是 outer拉动调整大小时，box的大小动态的变大变小和父元素匹配。

css和js，jquery实现都可以，如何达成？

[bdview]

子元素的 hight和weight 设置为 100% 即可