Encountered an issue while trying to create a horizontal scroll using inline-flex. Unable to add padding around the scrolling div due to inconsistencies in child widths causing unexpected behavior.
To further investigate and understand the problem, visit this link.
var divs = document.querySelectorAll('.content > div');
var widths = [], sum = 0;
for (var i = 0; i < divs.length; i++) {
var div = divs[i]
var w = div.offsetWidth;
widths.push(w);
sum += w;
}
console.log('div width:', widths.join(', '));
console.log('sum (including padding):', sum + 200 + 'px');
console.log('computed style:', getComputedStyle(document.querySelector('.content')).width);
console.log('...can\'t get spacing to the right :\'(');* {
margin:0;
box-sizing: border-box;
font-family: courier;
font-size: 14px;
}
.container {
width: 100vw;
height: 100vh;
}
.content {
display: inline-flex;
height: 100%;
padding: 100px;
}
.content > div {
height: 100%;
padding: 20px;
flex: none;
}
.A { background: red; }
.B { background: blue; }
.C { background: orange; }
.inside {
height: 100%;
padding: 40px;
border: rgba(255,255,255,.75) 2px dashed;
color: white;
font-size: 90px;
}<div class="container">
<div class="content">
<div class="A"><div class="inside">AA</div></div>
<div class="B"><div class="inside">B</div></div>
<div class="C"><div class="inside">Long-C</div></div>
<div class="A"><div class="inside">Quite-Long-A</div></div>
<div class="C"><div class="inside">CC</div></div>
</div>
</div>var w = parseFloat(getComputedStyle(div).width);
2062px > 1684.19pxThe discrepancy between the computed style width and the actual scrolling behavior is unexpected. Despite the small width reported, the div scrolls with a larger offset due to a difference in evaluation of widths, resulting in a inability to achieve spacing to the right.