html - whatwg - www w3 org español
IE11 flexbox max-width y margen: auto; (3)
En mi caso tuve algo como:
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 no tiene un ancho fijo (o altura) de ningún tipo, sino que contiene una combinación de elementos en línea y elementos de bloque.
Quería que mi contenido apareciera centrado horizontal y verticalmente, pero respetando el max-width max-height de .wrapper . Especificando justify-content: center; en .my-flexbox empujó el contenido de la pantalla hacia la derecha (me parece un error), y align-items: center; no tuvo impacto (a mi entender este es el comportamiento por defecto).
En su lugar, la solución fue agregar align-self: center; a .wrapper .
Por qué esto tiene algún sentido está más allá de mí. Presumiblemente esto es solo una implementación defectuosa de flexbox en IE11.
Tengo un contenedor de flexbox simple con dos elementos:
<div id=''container''>
<div id=''first-item''>first item</div>
<div id=''second-item''>second item</div>
</div>
El primer elemento tiene flex-grow: 1 y ancho máximo de 200 px. El segundo elemento tiene margen izquierdo: auto; Alinearse justo al contenedor:
#container {
display: flex;
}
#first-item {
max-width: 200px;
flex: 1;
}
#second-item {
margin-left: auto;
}
Aquí hay una demostración de trabajo: http://jsfiddle.net/c81oxdg9/2/
Quiero que el primer elemento se alinee a la izquierda y tenga un ancho máximo. Y el segundo elemento a alinear a la derecha.
Funciona bien en Chrome, Firefox e incluso IE10, pero no IE11. En IE11, el segundo elemento se empuja fuera del contenedor.
¿Cómo arreglar esto para IE11? ¿Me estoy perdiendo alguna propiedad?
Encontré una respuesta que parece funcionar (aunque admito que no la he probado en IE 10): agregué width: 100% al elemento que necesita alineación. Funciona muy bien en IE.
Probablemente sea demasiado tarde para ayudarlo, pero tal vez alguien más necesite la solución.
Tuve el mismo problema con
display: flex;
-ms-flex: 1;
max-width: 300px;
en combinación con
margin: 0 auto;
sobre los elementos hijos. Ellos son empujados fuera del contenedor div.
Sin embargo, lo resolví con intento y error y leyendo.
y
Flexbox IE10 problemas de ancho
Finalmente lo solucioné con la sustitución.
-ms-flex: 1;
con
-ms-flex: 1 0 auto;
Cuidado. Esto solo funciona, si realmente necesita un ancho máximo dentro de las columnas flex. De lo contrario se verá como display: block.