JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="inner-content" id="inner1">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </div>
</div>

CSS

.parent{
 background:black;
 padding:20px;
 position:relative;
 overflow:hidden;
    height:250px;
    width:700px;
  
}
.inner-content{
    background:gray;
}
#inner1{
   width:6000px;
   height:5000px;
}

JavaScript

$(".parent").each(function(){
    // get parent height
    var p    = $(this).css("padding").replace("px","");
    var h    = $(this).css("height").replace("px","");
    var ph   = h-2*p; 

    // get inner height
    var $ic = $(this).find(".inner-content");
    var ih   = $ic.height();

    // set zoom size
    $ic.css('zoom',ph/ih);

    $(this).height(ph);
    
});