internet explorer - for - IE10 Elemento Flexbox P no envolvente

flex html5

Question

http://jsfiddle.net/pvJRK/2/

Básicamente, en IE10 ap elemento que tiene texto más ancho que su padre cuando la "dirección" es una fila, se desbordará y, posteriormente, empujará a otros hermanos fuera del contenedor. El ajuste parece funcionar bien en modo columna (y puede ver el mismo jsfiddle en Chrome y ver cómo se comporta como se esperaba).

<div id="flex-one">
    <p>Some extra long content (for the container) that correctly wraps!</p>
    <aside>Content</aside>
</div>

<div id="flex-two">
    <p>Some extra long content (for the container) that incorrectly wraps!</p>
    <aside>Content</aside>
</div>

div {
    width: 250px;
    padding: 1em;
    background: blue;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-bottom: 1em;
}

#flex-one {
    -webkit-flex-flow: column;
    -ms-flex-direction: column;
}

#flex-two {
    -webkit-flex-flow: row;
    -ms-flex-direction: row;
}

p {
    margin: 0;
    padding: 0;
    background: yellow;
}

aside {
    background: red;
}

¿Alguna idea sobre cómo corregir este comportamiento para que no se desborde su contenedor? (sin suministrar un fijo ya que esto se usa en un diseño fluido).

Answer 1

Agregar flex-shrink: 1 al elemento primario de los elementos que necesitan envolverse me ha solucionado esto en IE10.

Nota: flex: 1 1 auto (o -ms-flex ) es una forma abreviada de:

flex-grow: 1
flex-shrink: 1
flex-basis: auto

En este caso, es específicamente flex-shrink que solucionará el problema. Esta propiedad debe ser 1 por defecto, así que supongo que esto es un error con la implementación IE10 de Flex Box y al establecer explícitamente su valor, corrige el error.

Answer 2

La respuesta aceptada no funcionó para mí.

Mi problema ( http://jsfiddle.net/Hoffmeyer/xmjs1rmq/ ) se resolvió como se describe en flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

Conjunto

max-width: 100%

Answer 3

No tiene ningún sentido para mí, pero agregando -ms-flex: 0 1 auto o -ms-flex: 1 1 auto al párrafo y a un lado lo corrige en IE10. Por defecto, se supone que los elementos tienen flex: 0 1 auto aplicado flex: 0 1 auto a ellos cuando se convierten en elementos flexibles.

http://jsfiddle.net/pvJRK/3/

Answer 4

Para mí, necesitaba hacer esto antes de que comenzara a funcionar para mí:

(usando clases para mayor claridad y sin incluir prefijos para abreviar)

HTML:

<a class="flex">
    <span class="flex-child">Text that isn''t wrapping in IE10</span>
</a>

CSS:

.flex {
    display: flex;
}

.flex-child {
    display: block;
    max-width: 100%;
    flex-shrink: 1;
}

Tenga en cuenta que necesita establecer elementos hijos naturalmente en línea a algo que no sea en línea (principalmente display:block o display:inline-block ) para que funcione la corrección.

Gracias a las respuestas anteriores por hacerme la mayor parte del camino :)

Actualizar:

La técnica anterior no funciona si la dirección flexible está configurada en columna.

Mi recomendación para cuando flex-direction se establece en la columna es usar una consulta de medios de ancho mínimo para asignar un ancho máximo en el escritorio.

.flex {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .flex-child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
        flex-shrink: 1;
    }
}

Answer 5

esta imagen muestra la media de defult flex en IE 10, el ajuste de flex-shrink en IE10 es 0; entonces si el código es:

.title {
   display: flex;
   justify-content: space-between;
}

<div class="title">
    <span class="title-name">some word word word</span>
    <label >some one checkbox</label>
</div>

pero el lapso no se ajustará en IE10, por lo que el código debe ser este:

.title {
    display: flex;
    justify-content: space-between;
}
.title-name{
    display: block;
    flex-shrink: 1;
}