JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<div class="parent"> <!-- component -->
    <div class="container">
        <div class="child"> <!-- visualization -->
            beginning ------------------------------------- ... ----- end
        </div>
    </div>
</div>

CSS

body {
    font-family: Helvetica;
    color: white;
}

div.parent {
    overflow: hidden;
    position: absolute;
    left: 50px;
    height: 100px;
    width: 90%;
    border: 1px dashed black;
}

div.container {
    overflow: hidden;
    position: relative;
    left: 20%;
    width: 50%;
    top: 40%;
    height: 20%;
    border: 1px dashed red;
}

div.child {
    position: relative;
    left: -20px;
    width: 4000px;
    height: 100%;
    border: 1px solid orange;
    background-color: steelblue;
}

JavaScript

$( document ).ready( function() {
    var el = $( ".child" )[0],
        co = $( ".parent" )[0];
    
    var leftOffset = 0;
    var topOffset = 0;
    var width = Infinity;
    var height = Infinity;
    
    do {
        console.log( el, el.offsetLeft, el.offsetTop, $(el).width(), $(el).height() );
        leftOffset += el.offsetLeft;
        topOffset += el.offsetTop;
        width = $(el).width() < width ? $(el).width() : width;
        height= $(el).height() < height ? $(el).height() : height;
        el = el.parentNode;
    } while( el != co );
    
    console.debug( leftOffset, topOffset, width, height );
});