Então eu tenho um DIV#Wrapper que tem uma largura fixa. Dentro desse DIV, eu tenho outro DIV#Panel que também tem uma largura fixa:

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

Às vezes, a largura do Painel é maior do que a do Wrapper, e nesses casos eu gostaria de ampliar o Wrapper via JavaScript, para que ele envolva o Painel perfeitamente.

Demonstração ao vivo: http://jsfiddle.net/H6rML/

Eu pretendia usar.scrollWidth no Wrapper para determinar a largura do painel. No entanto, o problema é que o Wrapper tem preenchimento horizontal, e o.scrollWidth por algum motivo, inclui apenas o preenchimento esquerdo do invólucro. Assim:

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

Então, dado:

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

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

Wrapper.scrollWidth devolve310px, o que não é muito útil. E se.scrollWidth não incluiu nenhum preenchimento e apenas retornou a largura do painel, eu poderia trabalhar com isso (eu adicionaria o preenchimento manualmente a esse valor). Se ambos os paddings fossem incluídos, eu também poderia trabalhar com isso. Mas por que apenas o preenchimento esquerdo está incluído? (Btw este comportamento parece ser cross-browser.)

Algumas notas adicionais:

Não consigo definir a largura no Wrapper diretamente. No meu código real, defino a largura em um elemento ancestral que é vários níveis acima do Wrapper e uso uma API personalizada para definir a largura. É por isso que preciso recuperar o320px valor.

Eu gostaria de uma solução que não depende do conteúdo do Wrapper. Na minha demonstração, é um painel, mas em outros cenários pode haver um elemento diferente que transborda ou até vários elementos. É por isso que eu fui com.scrollWidth no invólucro.

Existe uma maneira de obter o valor320px sem ter que adicionar manualmente o preenchimento certo para o.scrollWidth valor?

Btw, de acordo com o padrão, o preenchimento direito deve ser incluído:

O atributo scrollWidth deve retornar o resultado da execução destas etapas:

Se o elemento não tiver nenhuma caixa de layout CSS associada, retorne zero e termine essas etapas.

Se o elemento for o elemento raiz e o Documento não estiver no modo quirks, retorne max (largura do conteúdo do documento, valor de innerWidth).

Se o elemento for o elemento de corpo HTML e o Documento estiver no modo quirks, retorne max (largura do conteúdo do documento, valor de innerWidth).

Retorna o valor computado da propriedade 'padding-left', mais o valor computado de 'padding-right', mais a largura do conteúdo do elemento.

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

Por que os navegadores não se comportam de acordo?

Para melhorar ainda mais a clareza do meu post, deixe-me resumir as duas principais questões:

(1) Se a norma afirmar que o preenchimento correto deve ser incluído no.scrollWidth valor, então por que os navegadores não se comportam de acordo?

(2) É possível recuperar o valor correto (320px no meu caso), sem ter que adicionar manualmente o preenchimento correto?

Esta questão foi respondida em outro tópico

A resposta a esta pergunta está localizada aqui:Quando um elemento filho estourar horizontalmente, por que o preenchimento correto do pai é ignorado?

​