如何强制收缩div标签内的子元素溢出

Question

我在HTML代码下面有这个。

<div id="ImageWrapper" class="grid_col-xs">

  <div id="parentID" style="background-image: url(img/retailshop.jpg);background-size:100%;width: 100%;height: 0;padding-top: 66.64%;" ></div>                              

  <script type="text/javascript">
        drawOverlayHeatmap('parentID');
  </script>

</div>

drawOverlayHeatmap('parentID')函数在parentID div标记内绘制画布。但它溢出了我的div标签中的一些内容。

<script type="text/javascript">
        var X = new Array(10, 10, 10, 30, 10, 30, 10, 20, 30, 40, 50, 60, 70, 80, 50, 60, 70, 80);
        var Y = new Array(10, 30, 10, 50, 10, 50, 30, 20, 10, 20, 10, 10, 10, 100, 10, 10, 10, 100);
        var C = new Array(5, 10, 7, 20, 5, 20, 5, 10, 7, 20, 5, 20, 5, 10, 7, 20, 5, 20);
        var computeRelativePosition = (point, relativeTo) => {
            return (point / 100) * relativeTo;
        };

        function drawOverlayHeatmap(elementName){

            var heatmap = h337.create({
                container: document.getElementById(elementName),
                // a waterdrop gradient ;-)
                // gradient: { .1: 'rgba(0,0,0,0)', 0.25: "rgba(0,0,90, .6)", .6: "blue", .9: "cyan", .95: 'rgba(255,255,255,.4)' },
                maxOpacity: .6,
                radius: 10,
                blur: .90
            });

            var width = (window.getComputedStyle(document.getElementById(elementName)).width.replace(/px/, ''));
            var height = (window.getComputedStyle(document.getElementById(elementName)).height.replace(/px/, ''));
            console.log(height);

            var generate = function (iterator) {

                var x = (computeRelativePosition(X[iterator], width)) >> 0;
                var y = (computeRelativePosition(Y[iterator], height)) >> 0;
                var c = (C[iterator] * 100) >> 0;

                // add the datapoint to heatmap instance
                heatmap.addData({ x: x, y: y, value: c, radius: 50 });
            };
            for (i = 0; i < X.length; i++) {
                generate(i);
            }
        }
    </script>

如何强行设置我的dic标签，不要让其中的其他组件溢出？

编辑：我曾尝试使用overflow: auto和hidden。但我不想失去溢出区域。我希望我的parentID div标签上的那个区域变得松散。

我使用https://www.patrick-wied.at/static/heatmapjs/在图像上方绘制热图。我把图像作为我的背景放在div标签中。