I'm making a responsive website that has pages with several nested <div>s with various 1px borders. I have overflow set to auto in case some unexpected element exceeds the screen size.
In Firefox everything looks fine.
But in Google Chrome, sometimes grey scrollbars (unscrollable) appear even when there is no overflow content. Sometimes it's X or Y or both, depending on the zoom level.
The problem disappears when turning off the 1px border.
I've done further testing and the problem appears on Windows 7 and 8.1, but not 10. The behavior on my computers are opposite for Windows 7 and 8.1. When zoom is 100% Win 8.1 shows scrollbars, while Win 7 does not. When zoom is 90% or 110% Win 8.1 does not show scrollbars, while Win 7 does show.
If I wrap the <div> with border with an outer <div> with no styling, the scrollbars disappear most of the time except for 75% zoom.
Using box-sizing:border-box; did not help.
Is there a simple solution I can use to fix this without having to change things in the body or breaking the styling of the other various pages on the site?
Here is a jsfiddle test which is fine on Firefox but shows X scrollbar in Chrome at 100% zoom for me: https://jsfiddle.net/tsr1w630/0/
html {
margin: 0;
padding: 0
}
body {
background-color: #fff;
color: #000;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 3px;
overflow: auto;
}
.box_with_border {
display: block;
border: 1px solid #CCC;
overflow: auto;
padding: 3px
}<div class="box_with_border">
asdf1234
</div>I attached a screenshot here:
