Por lo tanto, tengo un DIV#Wrapper que tiene un ancho fijo. Dentro de ese DIV, tengo otro DIV.#Panel que también tiene un ancho fijo:

<code><div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>  
</code>

A veces, el ancho del Panel es mayor que el del Wrapper, y en esos casos me gustaría ampliar el Wrapper a través de JavaScript, para que se ajuste perfectamente al Panel.

Demo en vivo: http://jsfiddle.net/H6rML/

Tenía la intención de usar.scrollWidth en el contenedor para determinar el ancho del panel. Sin embargo, el problema es que el Wrapper tiene un relleno horizontal, y el.scrollWidth por alguna razón solo incluye el relleno izquierdo de la envoltura. Asi que:

<code>Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
</code>

Entonces, dado:

<code>#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}
</code>

Wrapper.scrollWidth devoluciones310px, lo cual no es muy útil. Si.scrollWidth no incluía ningún relleno y solo devolvía el ancho del Panel, podría trabajar con eso (agregaría el relleno manualmente a ese valor). Si se incluyeran ambos rellenos, podría trabajar con eso también. Pero, ¿por qué solo se incluye el relleno izquierdo? (Por cierto, este comportamiento parece ser el navegador cruzado.)

Algunas notas adicionales:

No puedo establecer el ancho en la envoltura directamente. En mi código real, establezco el ancho en un elemento ancestral que se encuentra varios niveles por encima del Wrapper, y uso una API personalizada para establecer el ancho. Es por eso que necesito recuperar la totalidad320px valor.

Me gustaría una solución que no dependa del contenido del Wrapper. En mi demostración es un Panel, pero en otros escenarios podría haber un elemento diferente que se desborda, o incluso varios elementos. Es por eso que fui con.scrollWidth en la envoltura.

¿Hay una manera de obtener el valor320px sin tener que añadir manualmente el relleno correcto a la.scrollWidth ¿valor?

Por cierto, según la norma, se debe incluir el relleno correcto:

El atributo scrollWidth debe devolver el resultado de ejecutar estos pasos:

Si el elemento no tiene ningún cuadro de diseño CSS asociado, devuelva cero y finalice estos pasos.

Si el elemento es el elemento raíz y el documento no está en el modo de peculiaridades, devuelva max (ancho del contenido del documento, valor de innerWidth).

Si el elemento es el elemento del cuerpo HTML y el documento está en el modo de peculiaridades, devuelva el valor máximo (ancho del contenido del documento, valor de ancho interno).

Devuelva el valor computado de la propiedad 'padding-left', más el valor computado de 'padding-right', más el ancho del contenido del elemento.

Fuente:http://www.w3.org/TR/cssom-view/

¿Por qué los navegadores no se comportan en consecuencia?

Para mejorar aún más la claridad de mi publicación, permítame resumir las dos preguntas principales:

(1) Si la norma establece que el relleno correcto debe incluirse en el.scrollWidth valor, entonces ¿por qué los navegadores no se comportan en consecuencia?

(2) ¿Es posible recuperar el valor correcto (320px en mi caso), sin tener que agregar manualmente el relleno correcto?

Esta pregunta ha sido respondida en otro hilo.

La respuesta a esta pregunta se encuentra aquí:Cuando un elemento secundario se desborda horizontalmente, ¿por qué se ignora el relleno correcto del padre?

​