Perché scrollWidth include solo il riempimento sinistro?

Question

Quindi, ho un DIV #Wrapper che ha una larghezza fissa. All'interno di quella DIV, ho un altro DIV #Panel che ha anche una larghezza fissa:

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

A volte, la larghezza del pannello è più grande del con del Wrapper, e in quei casi mi piacerebbe ampliare la Wrapper tramite JavaScript, in modo da avvolgere perfettamente il Pannello.

Demo online:http://jsfiddle.net/H6rML/

ho intenzione di usare .scrollWidth sulla confezione per determinare la larghezza del pannello. Tuttavia, il problema è che Wrapper ha un padding orizzontale e lo .scrollWidth per qualche motivo include solo il padding sinistro del wrapper. Quindi:

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width 

Quindi, data:

#Wrapper { 
    width: 200px; 
    padding: 10px;   
} 

#Panel { 
    width: 300px; 
} 

Wrapper.scrollWidth rendimenti 310px, che non è molto utile. Se .scrollWidth non includesse alcun padding e restituisse solo la larghezza del Pannello, avrei potuto lavorarci sopra (aggiungerei il padding manualmente a quel valore). Se entrambi i padding fossero inclusi, potrei lavorare anche con quello. Ma perché è inclusa solo l'imbottitura sinistra? (Btw questo comportamento sembra essere cross-browser.)

Alcune note aggiuntive:

1. non riesco a impostare la larghezza su un involucro direttamente. Nel mio codice reale, imposto la larghezza su un elemento antenato che si trova a diversi livelli sopra il wrapper, e io uso un'API personalizzata per impostare la larghezza. Questo è il motivo per cui ho bisogno di recuperare il valore completo 320px.

2. Desidero una soluzione che non dipenda dal contenuto del wrapper. Nella mia demo è un pannello, ma in altri scenari potrebbe esserci un elemento diverso che trabocca, o anche più elementi. Questo è il motivo per cui sono andato con .scrollWidth su Wrapper.

C'è un modo per ottenere il valore 320px senza dover aggiungere manualmente l'imbottitura giusta al valore .scrollWidth?

---

proposito, secondo lo standard, l'imbottitura destra dovrebbe essere inclusa:

L'attributo scrollWidth deve restituire il risultato dell'esecuzione di queste procedura:

1. se l'elemento non ha una casella di layout CSS associata restituisce zero e termina questi passaggi.

2. Se l'elemento è l'elemento principale e il documento non è in modalità quirks max ritorno (larghezza contenuto del documento, valore innerWidth).

3. Se l'elemento è l'elemento del corpo HTML e il documento è in modalità quirks, restituisce max (larghezza del contenuto del documento, valore di innerWidth).

4. Restituisce il valore calcolato della proprietà 'padding-left', più il valore calcolato di 'padding-right', più la larghezza del contenuto dell'elemento.

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

Perché non i browser si comportano di conseguenza?

---

Per migliorare ulteriormente la chiarezza del mio post, mi permetta di riassumere le due questioni principali:

(1) Se gli stati standard che il padding diritto deve essere incluso nel valore .scrollWidth, allora perché i browser non si comportano di conseguenza?

(2) È possibile recuperare il valore corretto (320px nel mio caso), senza dover aggiungere manualmente il riempimento corretto?

---

Questa questione è stata risolta in un altro thread

La risposta a questa domanda si trova qui: When a child element overflows horizontally, why is the right padding of the parent ignored?

Answer 1

Prova questo:

#Wrapper { 
    min-width: 200px; 
    padding: 10px; 
    float: left; 
} 

o l'uso jQuery

$(document).ready(function() { 
    var width = jQuery("#Panel").width(); 
    $("#Wrapper").width(width); 
}); 

Answer 2

È possibile utilizzare jQuery per fare questo:

$(function() { 
    $("#Wrapper").width($("#Panel").outerWidth()); 
}); 

Questo tiene s' conto #Panel padding, margini, ecc

Answer 3

Io non sono sicuro se ho capito bene, ma da quello che ho letto, presumo che tu voglia modificare la larghezza di #Wrapper sulla base di #Panel. In questo caso, forse si potrebbe provare la seguente:

#Wrapper { 
    display: inline-block; 
    make sure to remove width from #Wrapper 
} 

Answer 4

Non ho idea del motivo per cui principali browser condividono questo bug fino ad oggi, ma qui è un demo del problema e soluzione inline-block.

document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth 
 
          +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth 
 
          +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth 
 
          +'&nbsp;&nbsp;&nbsp;(fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to direct child)';

.parent{ 
 
    border:1px solid rgba(50,150,220,1); 
 
} 
 
.child{ 
 
    background:rgba(100,200,255,0.3); 
 
    padding:10px 20px; 
 
    white-space:nowrap; 
 
} 
 
.scroll-container{ 
 
    border:1px solid red; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
} 
 
.two, .three, .four{ 
 
    width:60px; 
 
} 
 
.three .child{ 
 
    display:inline-block; 
 
} 
 
.four .parent{ 
 
    display:inline-block; 
 
}

<div class="scroll-container one"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="scroll-container two"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="scroll-container three"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="scroll-container four"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br>