IE11でのFlexboxの問題

Question

私はIEのバグのリストでこの問題を解決しようとしてきましたが、そこでは見つからないようです。 内部要素（.inner） - flex: 1の簡略フレックス宣言を避けることで解決されます。 - >flex: 1 1 auto;。

お願いします。

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.flex-item { 
 
    display:flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    outline: 1px solid; 
 
} 
 

 
.inner { 
 
    flex: 1; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
    <div class="inner"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quidem cum quod, sed iure aspernatur enim nihil vitae eos ullam molestias possimus quia repellat, delectus, rem est quibusdam. Ipsum, perspiciatis. 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="inner"> 
 
    lorem 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="inner"> 
 
    lorem 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="inner"> 
 
    lorem 
 
    </div> 
 
    </div> 
 
    </div>

実際に問題がFlex items overflowing parent in IE11

Answer 1

flex: 1 0 autoの代わりflex: 1

によって固定され、この問題です