Can't float two divs with 100vh next to eachother - html

Question

I want two divs that are both full height (100vh) and half width (50vw) to sit next to each other (essentially filling the whole page). However, in Chrome and Firefox the second div always drops below the first. If I decrease the height, to 50vh for example, the two divs sit side by side. Oddly enough the exact same code works in jsfiddle.net. https://jsfiddle.net/e6x2j0kr/
html, body {
background: red;
margin: 0;
padding: 0;
border: 0;
}
#container {
height: 100vh;
}
#left {
background: blue;
width: 50vw;
margin: 0;
padding: 0;
border: 0;
float: left;
height: 100vh;
}
#right {
background: yellow;
width:50vw;
margin: 0;
padding: 0;
border: 0;
float: left;
height: 100vh;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Thank you for any help.

Answer 1

Using vh can be buggy fairly often, largely because scroll bars will mess it up. You may have noticed webpages where you're able to scroll sideways just a bit. About the width of one scrollbar to be exact.
In your case, I imagine what's happening is a tiny render issue, which results in a scrollbar existing, which then forces there to need to be a scrollbar permanently.
If you're willing to use other css styling, I recommend flex:
#Container {
height: 100vh;
width: 100vw;
display: flex;
}
#Container > div {
width: 50%;
}
#Child1 {
background: #E6E;
}
#Child2 {
background: #6EE;
}
<div id="Container">
<div id="Child1"></div>
<div id="Child2"></div>
</div>
The reason I recommend flex is that it will force the items to be on the same row no matter what. You may notice strange scrolling stuff. This is the vh issue again, so just using percentage might work better.

Answer 2

This is odd, It works in the snippet and jsFiddle, but I just chucked it into a project and opened the file in chrome and it looks as you say. I think view width might include the scrollbar in the screen size, which might make it overflow.
I set #right {float: right} and you can see it overlaps the left div. However what you can do is set the width to 50% for both of them and that works:
html, body {
background: red;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: none;
}
#container {
height: 100vh;
}
#left {
background: blue;
width: 50%;
margin: 0 !important;
padding: 0 !important;
border: 0;
float: left;
height: 100vh;
}
#right {
background: yellow;
width: 50%;
margin: 0 !important;
padding: 0 !important;
border: 0;
float: right;
height: 100vh;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>