Shrink pause avvolgere come aggiungo altro testo in un bambino elemento DIV codice

Question

HTML: codice

<div id="container"> 
    <div id="first"> 
     foo bar baz foo bar baz 
     foo bar baz foo bar baz 
    </div> 
    <div id="second"> 
     Foo 
    </div> 
    <div id="third"> 
     foo bar baz foo bar baz 
     foo bar baz foo bar baz 
    </div> 
</div> 

CSS:

body { 
    text-align: center; 
} 
#container { 
    display: inline-block; 
    background: lightcyan; 
} 
#first { 
    display: inline-block; 
    background: lightgreen; 
} 
#second { 
    background: orange; 
} 
#third { 
    width: 30%; 
    display: inline-block; 
    background: lightblue; 
} 

sto cercando di garantire che l'intero contenitore div # Shrink-wrap prima circa div #. Il codice sopra funziona come previsto. Vedere questa demo: http://jsfiddle.net/HhrE6/

Tuttavia, come aggiungo altro testo nel div # terzo, le interruzioni di shrink-wrap. Guarda la demo interrotta: http://jsfiddle.net/n4Kn2/

1. Perché ciò accade?
2. Come posso evitare che ciò accada?

Answer 1

In questo esempio si ha la larghezza del contenitore che dipende dalla larghezza del contenuto, che, a sua volta, dipende dalla larghezza del contenitore. Ecco perché il renderer non può prendere in considerazione la larghezza effettiva del blocco #third nel momento in cui calcola la larghezza dello #container.

Secondo le specifiche CSS, the width of an inline block è calcolato come

min (max (larghezza minima preferita, disponibili larghezza), larghezza preferita).

dove la larghezza preferita è calcolato

formattando il contenuto senza linee di rottura diversi da dove si verificano esplicite interruzioni di linea

Così la larghezza del contenitore diventa la larghezza del blocco #third (come il più largo) se il suo contenuto è disposto senza interruzioni di riga e viene impostata la larghezza effettiva del blocco #third al 30% di questa larghezza.