100% width inconsistently computed in browsers and OS due to scrollbar

Question

I had a problem on my website due to which the user interface is interrupted due to the width of the elements in different browsers due to the scroll bar.

Basically, I started by wanting to hide the scroll bar, and since the method doesn't seem to be supported, I used what I found as a regular hack to add 1 div to the one I want scrollable, which makes the top of the overflow hidden, and internal, actually having a scroll, but giving it some padding, so that the scroll bar goes beyond the borders of the div outter and is not displayed.

Here's a fiddle with a simple implementation:

https://jsfiddle.net/p4pvakaq/1/

HTML:

<div id="outter">
    <div id="inner">
        <div id="content">
            1 <br />
            2 <br />
            3 <br />
            4 <br />
            5
        </div>
    </div>
</div>

CSS

#outter {
    width: 400px;
    height: 200px;
    background-color: red;
    overflow: hidden; /* commenting out this line will allow to better understand the hack */
}

#inner {
    width: 100%;
    height: 100%;
    background-color: blue;
    overflow: auto;
    padding-right: 16px;
}

#content {
    width: 100%;
    background-color: green;

    font-size: 128px;
    text-align: center;
}

, , , Mac OS X Chrome Safari. Windows , , Edge, "".

:

Mac OS - Chrome:

(#content) div/div. !

Windows - Chrome

, (#content) #inner div.

Windows ( ) - Edge

, , , , , .

Windows ( ) - Edge

.

, , , 100% div , . , , , , 100% . , , , 100% .

, ? ?

Answer 1

Mac Firefox + Safari + Chrome ( Win)

#outter {
    width: 400px;
    height: 200px;
    background-color: red;
    overflow: hidden; /* commenting out this line will allow to better understand the hack */
}

#inner {
    width: 100%;
    height: 100%;
    background-color: blue;
    overflow: auto;
    padding-right: 16px;
}

#content {
    width: 100%;
    background-color: green;
    padding-right:8px;
    padding-left:8px;
    font-size: 128px;
    text-align: center;
}

https://jsfiddle.net/p4pvakaq/7/

Answer 2

.

, , , .

3 divs javascript (3- div) , .

HTML

<div id="outter">
    <div id="inner">
        <div id="content">
            <div id="stuff">
                1 <br />
                2 <br />
                3 <br />
                4 <br />
                5
            </div>
        </div>
    </div>
</div>

CSS

#outter {
    width: 400px;
    height: 200px;
    background-color: red;
    overflow: hidden; /* commenting out this line will allow to better understand the hack */
}

#inner {
    width: 100%;
    height: 100%;
    background-color: blue;
    overflow: auto;
    padding-right: 16px;
    position: relative;
}

#content {
    position: absolute;
}

#stuff {
    width: 100%;
    background-color: green;

    font-size: 128px;
    text-align: center;
}

JavaScript

$(document).ready(function(){
    $('#content').css('width', $('#outter').get(0).offsetWidth)
})

http://jsfiddle.net/p4pvakaq/8/