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

问题背景：
看了这文章：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实现都可以，如何达成？