Content width changed by invisible scrollbar - html

Question

NOTE : The name of the post is what I suppose is happening... It can be edited later if someone find a better short description
> What am I trying to do ?
I'm trying to hide a scroll bar by adding padding on the right side of the scrollable element.
This element contains child elements (list or table)
> What problems are you facing ?
The width of the child element should be 100% of the containing element, but obviously it's less.
The empty space on the right looks like it's the scrollbar place.
So my questions are :
Why is that happening ?
How can I get the childElement (.inner*) to fit in the ContentBox of its parent ?
> Can you reproduce the bug ?
Here is a Fiddle with nothing else but what I'm talking about : JsFiddle
> Show me that code !
SIR YES SIR :o)
#mainWin {
overflow: hidden;
}
.container {
width: 100%;
padding-right: 40px;
box-sizing: content-box;
overflow: auto;
}
.innerContent, .innerTable {
width: 100%;
}
/* ################################################################ */
/* DO NOT REMOVE */
/* FIXED PROPERTIES */
#mainWin {
/* Simulate a calculated width (in %) */
width: 400px;
}
.container {
/* Arbitrary height of the scroll zone */
height: 200px;
}
/* DEBUG ¨PROPERTIES */
#mainWin {border: 1px solid #000;}
.container {background: #A55;border: 1px solid #5A5;}
.innerContent, .innerTable {background: #55A;border: 1px solid #D4E200;}
/* END DO NOT REMOVE */
/* ################################################################ */
<div id="mainWin">
<div class="container">
<table class="innerTable">
<tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr>
</table>
</div>
<hr>
<div class="container">
<div class="innerContent">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
</div>
</div>
</div>
PS: I put some CSS properties apart (end of CSS section) because I don't think they have anything to do with this problem and seems mandatory for me to get the expected result
♥

Answer 1

I found a way to solve my problem by adding some Javascript. If someone has a pure CSS solution, I would like to see it.
Here is the Javascript added :
function removeScrollBar() {
$(".container").each(function() {
var iWidth = $(this).width();
var child = $(this).find(".innerTable, .innerContent");
child.css('width',iWidth);
});
}
$(function() {
removeScrollBar();
});
Working JsFiddle