Gli elementi flessibili superano la larghezza del genitore in IE

Question

Ho una parentesi ul > li > a > img e sto utilizzando flexbox per allineare tutte le voci dell'elenco su una singola riga mentre le immagini mantengono le proporzioni.

Come appare in Chrome , Firefox , Safari , Opera & bordo

Come appare in IE 10/11

Quindi il mio problema è che io sto cercando di realizzare in IE lo stesso comportamento come ho fatto in Chrome e Firefox.

mio SASS/SCSS

ul.images { 
    float: left; 
    clear: both; 
    width: 100%; 
    min-height: auto; // Required for Firefox 
    padding: 0; 
    margin: 0; 
    border: 1px solid yellow; 

    display: -webkit-flex; 
    -webkit-flex-direction: row; 

    display: -ms-flexbox; 
    -ms-flex-direction: row; 

    display: flex; 
    flex-direction: row; 

    li { 
    border: 2px solid green; 
    flex: 1 1 auto; 
    width: auto; 
    min-width: 0; // Required by Firefox 
    max-width: 100%; 
    max-height: auto; 

    img { 
     float: left; // Removes phantom margin 
     width: auto; 
     max-width: 100%; 
     height: auto; 
     max-height: 100px; 
    } 
    } 
} 

Ecco un CodePen per chi vuole uno sguardo più dettagliato.

Answer 1

Non sono sicuro se questo è il modo in cui si desidera che il problema da risolvere, ma ho aggiunto in

li{ 
    height: 100% 
} 

e poche altre cose e sembra funzionare qui:

EDIT: aggiornato la demo, il rapporto sembra andare bene ora per Chrome e IE

http://jsfiddle.net/uf30wuwz/3/

Answer 2

soluzione più semplice: aggiungere 'overflow: avrai scegliendo n 'di classe' .images '

A commentatori:

Vero, ragazzi, perse quella, mi dispiace. @mathijs, tecnicamente vero, ma i CSS sono pieni di hack (deve essere). Si consideri, ad esempio, il clearfix, che al giorno d'oggi sembra essere commongood.

Ma in questo caso, dove il contenitore principale ha una larghezza massima di 500 px, nascondere l'overflow sembra la scelta migliore quando la somma delle larghezze di immagine ridimensionate non si adatta al contenitore dell'immagine. È un po 'una o/o situazione.

BTW: Chrome è meno vicino alle specifiche W3C che FF (DE 42+), io sceglierei di iniziare a utilizzare FF per i test iniziali e poi testarlo in Ch per rilevare stranezze. Scommetto che Ch nasconde l'overflow internamente.

@Matt, vorrei attenermi alla soluzione "overflow: hidden", in un progetto più ampio è piuttosto banale e fa il lavoro.

Mi chiedevo, hai davvero bisogno di ul/li ?? Con un po 'di ridisegnare il codice diventa meno complicato e condensato, date un'occhiata:

@Matt di nuovo: Apparentemente Ch taglia i dati degli elementi eccessivi quando il loro contenitore ha una larghezza fissa, come la vostra, mentre FF e IE si aspettano di dì loro cosa farne (W3C). Ho cambiato "rew-images" di classe da "overflow: hidden" a "overflow-x: scroll; overflow-y: hidden ', ora puoi capire perché devi fare qualcosa con overflow.

La fonte del tuo problema sta nel fatto che desideri che le immagini siano allineate in modo corretto E abbiano un rapporto di ridimensionamento adeguato (come anch'io). Ma la somma delle larghezze dell'immagine risultanti è maggiore di 500px (meno i margini ecc.), Quindi le "immagini" di classe vengono traboccate. Semplicemente non puoi mettere 600px in un contenitore di 500 px E mantenere le proporzioni. Dovrai tagliare o rimuovere il vincolo di larghezza del contenitore principale (rimuovi larghezza: 500 px). Come ho detto prima: o/o ...

.rew-container { 
 
    float: left; 
 
    width: 500px; 
 
    border: 2px solid black; 
 
    padding: 15px 
 
} 
 
.rew-images { 
 
    display: flex; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid red; 
 
    overflow-x: scroll; overflow-y: hidden 
 
} 
 
.rew-images img { 
 
    min-width: 100%; 
 
    max-width: 100%; 
 
    width: auto; 
 
    max-height: 100px 
 
} 
 
.rew-images a { 
 
    flex: 1 1; 
 
    border: 2px solid green; 
 
    max-height: 100px; 
 
}

<div class="rew-container"> 
 
    <div class="rew-images"> 
 
    <a href="http://4.bp.blogspot.com/-q8j1nkqwHnE/Tsbs1isbCTI/AAAAAAAAAG4/mcWdJwJ5uvE/s1600/armin_van_buuren_%25282%2529_798.jpg" title="armin_van_buuren_%282%29_798.jpg"> 
 
     <img src="https://tse4.mm.bing.net/th?id=JN.d1jQ4iuFK0%2b4AkstmpzD1A&amp;pid=15.1" alt="armin_van_buuren_%282%29_798.jpg" height="168" width="300"> 
 
    </a> 
 
    <a href="http://thegun2oo5.files.wordpress.com/2010/05/1140_armin_van_buuren.jpg" title="Armin van Buuren – the best Dj’ in the world :X:X:X"> 
 
     <img src="https://tse3.mm.bing.net/th?id=JN.RTJ8eeB%2bIMptSFcLhGpXQw&amp;pid=15.1" alt="" height="480" width="444"> 
 
    </a> 
 
    <a href="http://thexipiron.files.wordpress.com/2012/01/armin-van-buuren.jpg" title="armin van buuren"> 
 
     <img src="https://tse2.mm.bing.net/th?id=JN.VkPvTXw%2fPEOMmOcl9smvoQ&amp;pid=15.1" alt="armin van buuren" height="360" width="480"> 
 
    </a> 
 
    <a href="http://fondosdedj.com/wp-content/uploads/images/74/armin-van-buuren.jpg" title="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ..."> 
 
     <img src="https://tse2.mm.bing.net/th?id=JN.SvQClhGAAGcPYl1U2SZQsA&amp;pid=15.1" alt="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ..." height="315" width="480"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 3

modificare la larghezza <img> da auto al 100%

img { 
    width: 100%; 
    max-width: 100%; 
    height: auto; 
    max-height: 100px; 
} 

Sembra che sia Chrome che non rispetta standard di

Answer 4

Ho riscontrato lo stesso problema e ho trovato questa correzione, aggiungila al foglio di stile:

*{ 
min-height: 0; 
min-width: 0; 
}