cómo obtener el ancho interior de un elemento en jquery SIN la barra de desplazamiento

Dado un div que tiene una barra de desplazamiento (por ejemplo, b / c de desbordamiento: automático), ¿cómo obtengo el ancho interior exacto del elemento? En mi ejemplo:http://jsfiddle.net/forgetcolor/2J7NJ/ El ancho y el ancho interno reportan el mismo ancho. El número que quiero debe ser inferior a 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());​

Actualizar:

Necesito que esto funcione cuando el div box2 contiene una imagen grande (por lo tanto, tarda un segundo en cargarse). Aquí hay un ejemplo, que integra una de las soluciones a continuación (Lukx '), que no funciona:http://jsfiddle.net/forgetcolor/rZSCg/1/. ¿Alguna idea de cómo hacer que espere a que la imagen se cargue antes de calcular el ancho?

Respuestas a la pregunta(4)

Su respuesta a la pregunta