JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id='box1'>
<div id='box2'>
</div>
</div>
<p id="w"></p>
<p id="iw"></p>
<p id="scroll-width"></p>
<p id="true-width"></p>

CSS

#box1 {
    width:100px;
    height:100px;
    overflow: auto;
    box-sizing: content-box;
}

#box2 {
    width:200px;
    height:200px;
    background-color:#aaa;
}

/* to measure the scrollbar */
.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JavaScript

$('#box1').html("<img src='http://lorempixel.com/output/people-h-c-1449-1723-4.jpg#333' />");

// using the technique found @ http://davidwalsh.name/detect-scrollbar-width

$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.log(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);


$('#scroll-width').text("scrollbar width is: "+scrollbarWidth);
$('#true-width').text("true div width is: "+($('#box1').width()-scrollbarWidth));
$('#box1').find('img').attr("width",$('#box1').width()-scrollbarWidth);