Strano comportamento con l'immagine all'interno galleggiava contenitore

Question

Dato questo layout semplice:

HTML

<div class="container"> 
    <div class="imgContainer"> 
    <img src="http://placehold.it/400x400"> 
    </div> 
    <div> 
    This should always stay to the right of the image. 
    </div> 
</div> 

CSS

.container { 
    height: 20vh; 
} 

.imgContainer { 
    float: left; 
    height: 100%; 
} 

img { 
    height: 100%; 
} 

---

Issue # 1

Chrome, Firefox e Opera visualizza correttamente in questo modo:

IE11 pone in modo non corretto il testo 400 pixel a destra, in base alla larghezza naturale dell'immagine:

---

Issue # 2

Come si aumenta l'altezza della finestra, il testo dovrebbe st incollati alla destra dell'immagine. Funziona correttamente in Firefox.

Tuttavia, il testo si sovrappone l'immagine in Chrome e Opera:

---

vedere il comportamento in questo Fiddle.

Domanda: C'è uno stile che posso aggiungere che farà sì che tutti i browser si comportino in modo coerente?

[Nota: l'ho scoperto mentre lavoravo su this question. Ho pensato di avere una soluzione, fino a quando ho capito che non era reattivo in nessun browser tranne Firefox.]

Answer 1

Il seguente potrebbe fare il trucco.

Invece di utilizzare float, suggerirei di utilizzare le tabelle CSS.

Applicare display: table a .container e impostare l'altezza secondo necessità.

Per i due elementi figlio, .imgContainer e .panel, utilizzare display: table-cell e ereditare l'altezza dal blocco padre.

Penso che questo sia abbastanza vicino a quello che ti serve, dovrebbe funzionare in tutti i browser (ma non ho controllato ...)

.container { 
 
    height: 20vh; 
 
    display: table; 
 
} 
 
.imgContainer, .panel { 
 
    display: table-cell; 
 
    height: inherit; 
 
    vertical-align: top; 
 
} 
 
img { 
 
    vertical-align:top; 
 
    height: inherit; 
 
}

<div class="container"> 
 
    <div class="imgContainer"> 
 
    <img src="http://placehold.it/400x400"> 
 
    </div> 
 
    <div class="panel"> 
 
    This should always stay to the right of the image. 
 
    </div> 
 
</div>