flexbox larghezza massima e margine IE11: automatico;

Ho un contenitore FlexBox semplice con due elementi:flexbox larghezza massima e margine IE11: automatico;

<div id='container'> 
    <div id='first-item'>first item</div> 
    <div id='second-item'>second item</div> 
</div>

Il primo elemento è flex-grow: 1 e max-width a 200px. Il secondo elemento è margin-left: auto; essere allineati a destra al contenitore:

#container { 
    display: flex; 
    } 

    #first-item { 
    max-width: 200px; 
    flex: 1; 
    } 

    #second-item { 
    margin-left: auto; 
    }

Ecco una demo di lavoro: http://jsfiddle.net/c81oxdg9/2/

voglio il primo elemento ad essere allineato a sinistra e avere un po 'max-width. E il secondo elemento da allineare correttamente.

Funziona bene in Chrome, Firefox e anche IE10, ma non IE11. In IE11, il secondo elemento viene espulso dal contenitore.

Come risolvere questo problema per IE11? Mi manca qualche proprietà?

fonte

2015-08-09 svecon

Ho trovato una risposta che sembra funzionare (anche se ammetto di non averlo testato in IE 10): ho aggiunto width: 100% all'elemento che ha bisogno di allineamento. Funziona alla grande in IE.

Probabilmente è troppo tardi per aiutarti, ma forse qualcun altro avrà bisogno della soluzione.

fonte

2015-11-02 19:26:42 tmo256

La soluzione ha funzionato per me sia in IE10 che in IE11! Grazie per aver postato questo anche se l'hai pensato troppo tardi. Mi ha sicuramente aiutato! Grazie! –

La tua soluzione fa sì che l'elemento occupi l'intera quantità specificata in 'max-width', quindi non è diverso dalla sostituzione di' max-width' con 'width' – torvin

@torvin La differenza è che questo metodo consente all'elemento di ridursi secondo i vincoli del suo contenitore. L'impostazione esplicita di 'width' costringerebbe l'elemento ad essere quella larghezza anche se il suo contenitore fosse più stretto. – Sandwich

Ho avuto lo stesso problema con

display: flex; 
-ms-flex: 1; 
max-width: 300px;

in combinazione con

margin: 0 auto;

sugli elementi figlio. Vengono spinti fuori dal contenitore div.

Tuttavia, ho risolto con prova ed errore e la lettura

https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items

Flexbox IE10 width issues

Infine ho risolto con la sostituzione

-ms-flex: 1;

con

-ms-flex: 1 0 auto;

Attenzione. Funziona solo se hai veramente bisogno di una larghezza massima all'interno delle colonne flessibili. altrimenti sembrerà display: block.

fonte

2015-11-03 14:12:19 Fl0R1D3R

Questa era una soluzione per me. – pierot

Grazie! Stavo avendo lo stesso problema a causa della base flessibile o automatico o 0% non funziona come previsto su elementi con larghezza massima su ie11. Il collegamento è stato molto utile :) – HeberLZ

Nel mio caso ho avuto qualcosa di simile:

HTML:

<div class='my-flexbox'> 
     <div class='wrapper'> 
      <div class='content'> 
       <!-- ... --> 
      </div> 
     </div> 
</div>

CSS:

.my-flexbox { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.wrapper { 
    padding: 16px; 
    margin: auto; 
    max-width: 90%; 
    min-width: 40%; 
}

.content fa non hanno una larghezza fissa (o altezza) di qualsiasi tipo , ma contiene invece una combinazione di elementi inline ed elementi di blocco.

Desidero che il mio contenuto appaia centrato orizzontalmente e verticalmente, ma rispetta lo max-width e max-height di .wrapper. Specificare justify-content: center; su .my-flexbox ha spinto il contenuto dallo schermo verso destra (mi sembra un bug per me), e align-items: center; non ha avuto alcun impatto (a mia conoscenza questo è il comportamento predefinito).

Invece la soluzione era aggiungere align-self: center; a .wrapper.

Perché questo ha senso è oltre me. Presumibilmente questa è solo una buggy implementazione di flexbox in IE11.

fonte

2016-03-04 03:30:24

'align- [self/items]' si applica al posizionamento verticale, * non * orizzontale - quindi questo non risponde alla domanda OPs sui margini e sulla larghezza massima –

@IanClark Sono consapevole che 'align-self' __shouldn't__ risolve la domanda dell'OP, comunque, almeno nel mio caso (molto simile). Di qui la mia affermazione, "Presumibilmente questa è solo una buggy implementazione di flexbox in IE11." –

flexbox larghezza massima e margine IE11: automatico;

risposta

Problemi correlati