scrollWidth BUG

A bug where scrollWidth ignores right padding of inner block elements

by Slava

HTML

<div class="scroll-container one">
  <div class="parent">
    <div class="child">Lorem ipsum dolor sit</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
    <div class="child">Lorem ipsum sit</div>
    <div class="child">Lorem ipsum</div>
  </div>
</div>
<br>
<div class="scroll-container two">
  <div class="parent">
    <div class="child">Lorem ipsum dolor sit</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
    <div class="child">Lorem ipsum sit</div>
    <div class="child">Lorem ipsum</div>
  </div>
</div>
<br>

CSS

.parent{
  border:1px solid rgba(50,150,220,1);
}
.child{
  background:rgba(100,200,255,0.3);
  padding:10px 20px;
  white-space:nowrap;
}
.scroll-container{
  border:1px solid red;
  display:inline-block;
  overflow:hidden;
}
.scroll-container.two{
  width:50px;
}

JavaScript

document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth;