Dado um div que tem uma barra de rolagem (por exemplo, b / c de overflow: auto), como obtenho o innerwidth exato do elemento? No meu exemplo:http://jsfiddle.net/forgetcolor/2J7NJ/ width e innerWidth relatam a mesma largura. O número que eu quero deve ser menor que 100.

HTML:

<div id='box1'>
<div id='box2'>
</div>
</div>
<p id="w"></p>
<p id="iw"></p>​

CSS:

#box1 { 
    width:100px;
    height:100px;
    overflow:auto;
}

#box2 {
    width:200px;
    height:200px;
    background-color:#aaa;
}

Javascript:

$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());​

Atualizar:

Eu preciso que isso funcione quando o box2 div contém uma imagem grande (assim, leva um segundo para carregar). Aqui está um exemplo, integrando uma das soluções abaixo (Lukx '), que não funciona:http://jsfiddle.net/forgetcolor/rZSCg/1/. Alguma idéia de como esperar que a imagem seja carregada antes de calcular a largura?