html - whatwg - www w3 org español

IE11 flexbox max-width y margen: auto;

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

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

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.