JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<p><strong>All widths should be 400 regardless of browser zoom level</strong></p>

<div class="width class1">DIV 1 width: <span class="log-width"></span></div>

<div class="width class2">DIV 2 width: <span class="log-width"></span></div>

<div class="width class3">DIV 3 width: <span class="log-width"></span></div>

<div class="overflow"><div class="class1">DIV 4 scrollWidth: <span class="log-width"></span></div></div>

<div class="overflow"><div class="class2">DIV 5 scrollWidth: <span class="log-width"></span></div></div>

<div class="overflow"><div class="class3">DIV 6 scrollWidth: <span class="log-width"></span></div></div>

CSS

body {
    background-color:#FCC;
}
div {
    margin-bottom: 10px;
}
.width  {
    border:0;
    height:50px;
}
.class1, .class2, .class3 {
    border:0;
    height:50px;
    width:400px;
}
.class1 {
    background-color:white;
}
.class2 {
    background-color:#CCCCCC;
}
.class3 {
    background-color:lightgreen;
}
.overflow {
    overflow-x:hidden;
    width:200px;
}

JavaScript

$(window).resize(function () {
    $(".width .log-width").each(function() {
        $(this).text( $(this).parents(".width").width() );
    });
    $(".overflow .log-width").each(function() {
        $(this).text( $(this).parents(".overflow")[0].scrollWidth );
    });

});