JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="div1" class="base">
        Why is my scrollWidth wrong in IE?
    </div>
</div>
<br style="clear: both;">
<br>
<button id="btn1" onclick="fnCheckScroll(div1,btn1)">Calculates False</button>
<br>
<br>
<br> 
<div class="wrapper2">
    <div id="div2" class="base">
        Why is my scrollWidth wrong in IE?
    </div>
</div>
<br style="clear: both;">
<br>
<button id="btn2" onclick="fnCheckScroll(div2,btn2)">Calculates True</button>
<br>
<br>
<br>
Issue seems to be based on the character widths/font size resulting in I would assume a fractional value that in one case gets rounded up and the other rounded down.  The issue however does not ever cause scroll bars to appear (if overflow is auto).  Issue doesnt happen with overflow: visible.
  
        
<script type="text/javascript">
function fnCheckScroll(div, btn)
{
 
   var iScrollWidth = div.scrollWidth;
   var iOffsetWidth = div.offsetWidth;
   var boundingClientRectWidth  = div.getBoundingClientRect().width;
	var amIOverflowingOld = (iScrollWidth > iOffsetWidth);
  var amIOverflowingNew = (iScrollWidth > iOffsetWidth) && (boundingClientRectWidth == iOffsetWidth);
  
   var iDifference = iScrollWidth - iOffsetWidth;
   btn.innerHTML = "Overflow w/o Bounding = " + amIOverflowingOld + " Overflow W/ Bounding = " + amIOverflowingNew; 
}
</script>

CSS

.base{
    font-size: 16px; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrapper{
  max-width: 238px;
}

.wrapper2{
  max-width: 236px;
}

.wrapper{
    float: left;  
}