width: 100% is different in pixels when scrollbar is on and off - html

Question

We have HTML with CSS:
<div style="width: 80%"><!--This width can be different or expressed in % -->
<div>
<div style="width: 50%; background-color: blue; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: brown; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
<div style="height: 110px; overflow-y: scroll;">
<div style="width: 50%; background-color: yellow; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: green; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
</div>
And a result:
All divs have 50% width, but bottom ones are narrower, because of scroll bar. I know I could calculate scroll bar width and make top ones narrower, but is there better solution? Solution using HTML/CSS only is preferred.
Fiddle here: http://jsfiddle.net/s6rhs/6/

Answer 1

You can use custom jquery scroll bars for your page with the help of some jquery plugins like these
https://github.com/inuyaksa/jquery.nicescroll
So that you won't have trouble with default scrollbars of the browsers.

Answer 2

You could use flex layout, introduced in CSS3. Maybe there are too many browsers out there, you want to support, but they could use your current "solution".
Support: http://caniuse.com/#search=flex
If there's a scrollbar, your right container is a little smaller depending on the width of the scrollbar, but that shouldn't be noticed by users.
At the moment, the background scrolls out, but I think you'll find a solution for that.
Now, my answer isn't only text, there's also some code and a jsfiddle for you:
CSS
.flex {
display: flex;
flex-direction: row;
width: 100%;
}
.flex > div {
flex-grow: 1;
}
.flex > div:first-of-type {
width: 250px;
flex-grow: 0;
}
HTML
<div style="width: 500px">
<div class="flex">
<div style="background: green">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: yellow">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
<div class="flex" style="height: 110px; overflow-y: scroll;">
<div style="background: blue">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: red">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
</div>