CSS responsive vertical scrollbar issue - css

Question

I'm currently playing with bootstraps v2.3.2. media querys (I'm not using bootstraps grid, just those 4 media queries) to test them on mobile and tablet devices, and I notice that I keep getting a horizontal scrollbar and I don't understand why?
Basically I have one div and this CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin:0;
/* height: 3000px; */ /* forced vertical scrollbar */
height: 300px;
}
div{
padding: 0 10px;
margin: 0 auto;
background: aqua;
width: 980px;
border: 1px solid black;
height: 100%;
}
/* Large desktop */
#media (min-width: 1200px) {
div{
background: red;
width: 1200px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
div{
background: yellow;
width: 768px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
div{
background: blue;
width: 100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
div{
background: green;
}
}
Situation when I force vertical scrollbar: JSBin
But when I don't force vertical scrollbar, I get the wanted result: JSBin
So it's obviously due the vertical scrollbar. I found this article about scrollbar issue in Responsive Web Design, but I get the same result in both Chrome and FF.
Update: as looking the source of bootstrap v3.3.2 I've noticed that they have new media queries, however, they don't use the minimal possible width for the .container. This are their media queries:
#media (min-width: 768px) {
.container {
width: 750px; /* 18px difference */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 22px difference */
}
}
#media (min-width: 1200px) {
.container {
width: 1170px; /* 30px difference */
}
}
And here's the JSBin. Even when I forced the vertical scrollbar to appear, this won't trigger the horizontal scrollbar.
But if I want to use the minimal possible width for the media queries, like:
#media (min-width: 768px) {
.container {
width: 768px;
}
}
#media (min-width: 992px) {
.container {
width: 992px;
}
}
#media (min-width: 1200px) {
.container {
width: 1200px;
}
}
This will trigger the horizontal scrollbar - JSBin
Did the guys from bootstrap did that on purpose, because of the possibly that there can be the presence of vertical scrollbar?
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
I know that this may be a novice question, but I would appreciate if someone clarify this for me.

Answer 1

Bootstrap Media Querys
Setting media query
Bootstrap supports four media sizes:
Phones < 768px (8 inch)
Tablets ≥ 768px
Desktops ≥ 992px (10.33 inch)
Desktops ≥ 1200px (12.5 inch)
These are not fixed sizes!
If you have a screen that has a min-width of 768px the media query should trigger.
However setting a container to 768px will almost allways make that screen overflow
First of all the body element of all modern browser does have a margin to it.
example: Webkit browsers: body {margin: 8px;} so if your element of 768px and a margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px this will make it overflow (as it should). That said bootstrap sets: body {margin:0;}
An other example would be border. Border adds size to your element unless box-sizing isn't default. While outline sets the border inside your element.
Did the guys from bootstrap did that on purpose, because of the possibily that there can be the presence of vertical scrollbar ?
There is a possibility of that but i would think they set it because there is a bunch of css property's that affect size, so they gave a margin of error so to speak to avoid strange behavior like a horizontal scroll bar popping up.
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
You can use it: Fiddle!
Just Remember that some browsers will render it with a certain width.

Answer 2

Checkout the fiddle
https://jsfiddle.net/YameenYasin/as4Lmgas/1/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
div {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: blue;
height:auto;
min-height:300px; // For testing purpose only
}
#media (min-width: 768px) {
div {
width: 750px;
background: silver;
}
}
#media (min-width: 992px) {
div {
width: 970px;
background: yellow;
}
}
#media (min-width: 1200px) {
div {
width: 1170px;
background: red;
}
}
<div></div>