iframe size increases but doesnt decreases automatically

Question

I have an iframe which shows the content of my website which is responsive. I have set the iframe width to be 100% so the content inside the iframe reacts to the width of my window.

I am using a timer to constantly update the height of the iframe so that all the content fits in properly.

The problem is that the height of the body of the content which is inside the iframe increases when the window width is reduced but doesn't decrease when the width is increased. Ultimately I end up with a huge white space area at the bottom of the page. Is there a way to auto reset the height of the body content which is inside the iframe?

My question would be similar to this one How to auto shrink iframe height dynamically?

Unfortunately no one has answered and none of the solutions seem to work for me.

Source Code -

(function(document) {
    var View = document.getElementById('view');



    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
        };
    })();

    var iframe = document.createElement('iframe');
    iframe.src = "//link/to/my/website";
    iframe.width = "100%";
    iframe.id = "frame";
    iframe.style.display = "none";
    iframe.style.border = "none";

    iframe.addEventListener('load', function() {
        spinner.style.display = "none";
        iframe.style.display = "block";
        resize();
    });

    function resize() {
        var newheight = iframe.contentWindow.document.body.scrollHeight;
        iframe.style.height = newheight + "px";
        requestAnimationFrame(resize);
    }

    View.appendChild(iframe);

})(document);