Scrolling problem in iframes inserted using Javascript

Question

I am making the address search box appear as an iframe when the Find Zip Code button is clicked.

I put the warp element where the iframe will be displayed using the code below.

<script>
    const parent = document.querySelector('#billing_postcode_find_field');
    const billingField1 = document.querySelector('#woocommerce-input-wrapper');

    const newDiv = document.createElement('div');
    newDiv.setAttribute('id', 'wrap');
   newDiv.style.cssText = 'display:none;border:1px solid #dddddd;width:100%;height:auto !important;margin:5px 0;position:relative;overflow:hidden;'

       parent.insertBefore(newDiv, billingField1);
</script>

And I used the following code to bring up the address search bar.

<script>
    var element_wrap = document.getElementById('wrap');
    function foldDaumPostcode() {
        element_wrap.style.display = 'none';
    }
    function openDaumPostcode() {

        new daum.Postcode({
            oncomplete: function(data) {

                 document.getElementById('billing_postcode').value = data.zonecode;
                 document.getElementById('billing_address_1').value = data.address;

                element_wrap.style.display = 'none';

                // Return the scroll position to before the zip code search screen appears.

                document.getElementById('billing_address_2').focus();
                if (matchMedia("screen and (min-width: 1024px)").matches) {
                document.getElementById('billing_email').scrollIntoView({behavior: 'smooth'});
                } else {
                  // JavaScript to use in less than 1024px
                  document.getElementById('billing_address_2').scrollIntoView({behavior: 'smooth'});
                }
            },

            onresize : function(size) {
                element_wrap.style.height = size.height+'px';
            },
            width : '100%',
            height : '100%'
        }).embed(element_wrap);
        // Make the element with the iframe visible.
        element_wrap.style.display = 'block';
    }
</script>

However, the problem is that no matter how i change the height of the warp element, a scroll bar is created into the iframe on mobile. (screenshot link)

Since there is a scroll bar, if i scrolled, the scroll does not go down. (GIF LINK)

I know this problem has to do with height, but I don't know how to solve it.

Can someone tell me how do i fix this?

Thank you.