O texto em um contêiner flexível não quebra no IE11

Considere o seguinte trecho:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

No Chrome, o texto está agrupado conforme o esperado:

Mas, no IE11, o texto não está quebrando :

Este é um bug conhecido no IE? (se sim, um ponteiro será apreciado)

Existe uma solução alternativa conhecida?

Essa pergunta semelhante não tem uma resposta definida e um ponteiro oficial.

Adicione isto ao seu código:

.child { width: 100%; }

Sabemos que um filho em nível de bloco deve ocupar toda a largura do pai.

O Chrome entende isso.

O IE11, por qualquer motivo, deseja uma solicitação explícita.

Usando flex-basis: 100%ou flex: 1também funciona.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Nota: Às vezes, será necessário classificar os vários níveis da estrutura HTML para identificar qual contêiner obtém o width: 100%. Texto de quebra de CSS não funciona no IE

Eu tive o mesmo problema e o ponto é que o elemento não estava adaptando sua largura ao contêiner.

Em vez de usar width:100%, seja consistente (não misture o modelo flutuante e o modelo flex) e use flex adicionando isto:

.child { align-self: stretch; }

Ou:

.parent { align-items: stretch; }

Isso funcionou para mim.

Como Tyler sugeriu em um dos comentários aqui, usando

max-width: 100%;

na criança pode trabalhar (trabalhou para mim). Usar align-self: stretchapenas funciona se você não estiver usando align-items: center(o que eu fiz). width: 100%só funciona se você não tiver vários filhos dentro do seu flexbox que deseja mostrar lado a lado.

Olá, eu tive que aplicar a largura de 100% ao seu elemento de avô. Não é seu (s) elemento (s) filho (s).

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

De alguma forma, todas essas soluções não funcionaram para mim. Existe claramente um bug no IE flex-direction:column.

Eu só consegui funcionar depois de remover flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

As soluções propostas não me ajudaram com ".child {width: 100%;}", pois eu tinha uma marcação mais complicada. No entanto, encontrei uma solução - remova "align-items: center;", e isso também funciona para este caso.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

A única maneira de conseguir 100% consistentemente evitar esse erro da coluna de direção flexível é usar uma consulta de mídia de largura mínima para atribuir uma largura máxima ao elemento filho em telas de tamanho de área de trabalho.

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

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

Você precisará definir elementos filho naturalmente embutidos (por exemplo, <span>ou <a>) para algo diferente de embutido (principalmente exibição: bloco ou exibição: bloco embutido) para que a correção funcione.

Não encontrei minha solução aqui, talvez alguém seja útil:

.child-with-overflowed-text{
  word-wrap: break-all;
}

Boa sorte!

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

Isso funcionou para mim.

Eu também encontrei esse problema.

A única alternativa é definir uma largura (ou largura máxima) nos elementos filho. O IE 11 é um pouco estúpido, e eu apenas passei 20 minutos para perceber essa solução.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Eu tive um problema semelhante com imagens transbordando em um invólucro flexível.

Adicionar um flex-basis: 100%;ou mais flex: 1;ao filho transbordado corrigido funcionou para mim.

Por que usar uma solução complicada se uma simples também funciona?

.child {
  white-space: normal;
}