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;
}