Flexbox問題

第一次使用flexbox，並遇到一些麻煩，特別是使用IE（11）。Flexbox問題

JS小提琴和截圖（IE /火狐）：

https://jsfiddle.net/htw690wz/

https://postimg.org/image/h5et26w9r/

我指出的幾個問題：

1）IE不縮水/包裹內容以適合框。

2）Firefox（Chrome，Opera）未將內容置於框中。

3）IE顯示盒子正面的背面。

任何幫助將不勝感激。提前致謝。

要求伴隨代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
     <div class = "MCWrapper" id="MCWrapper"> 
      <div class = "MC" id = "MC3"> 
       <div id="f1_container"> 
        <div id="f1_card"> 
         <div class="front face"> 
         <p>Test text - this is a bit long for a single line, isn't it? I mean, come on... give me a break here. How long does text have to be these days?</p> 
         <a href = "canvas.jpg" target="_blank"><img src = "canvas.jpg"></a> 
         </div> 
         <div class="back face"> 
         <p>This is the back of the card.</p> 
         Blah blah blah 
         </div> 
        </div> 
       </div> 
      </div> 
      Footer Text 
     </div> 
    </body> 
</html>

CSS：

html { 
    display: flex; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
    background: url('bg.jpg'), rgba(0,0,0,0.5); 
    background-repeat: no-repeat; 
    background-attachment: stretch; 
    background-position: center; 
    background-size:100% 100%; 
    width:100%; 
    margin:0; 
    height:100%; 
    overflow:hidden; 
} 

body{ 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; /* align vertical */ 
    max-width:1900px; 
    min-height:725px; 
    height:725px; 
    margin:0 auto; 
    width:100%; 
    height:100%; 
} 

.MCWrapper { 
    display: flex; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
    flex-direction: column; 
    width:100%; 
    height:100%; 
    min-height:auto; 
    min-width:auto; 
    background-repeat: no-repeat; 
    background: url('cover-bg.jpg'), rgba(0,0,0,0.5); 
    background-attachment: stretch; 
    background-position: center; 
    background-size:100% 100%; 
    color:rgba(255,255,255,1); 
    border:solid 2px transparent; 
    border-radius:25px; 
    padding:0.5em; 
    color: hsla(280, 90%, 20%, 1); 
} 

.MC{ 
    position:relative; 
    width:0%; 
    height:66.6%; 
    display:flex; 
    font-size:1.15em; 
    background:rgba(255,255,255,1); 
    color:rgba(0,0,0,1); 
    padding:1em; 
    margin:1em; 
    border:solid 2px black; 
    border-radius:15px; 
    overflow:auto; 
} 


.MC:nth-of-type(1) { 
    background:rgba(51,51,255,0.75); 
    width:90%; 
} 
.MC:nth-of-type(2){ 
    background:rgba(19,187,156,0.75); 
    width:90%; 
} 

.MC:nth-of-type(3){ 
    background:rgba(248,238,30,0.75); 
    flex-wrap:wrap; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
} 
.MC:nth-of-type(4){ 
    background:rgba(248, 30, 149,0.75); 
} 

.MC:nth-of-type(5){ 

    background:rgba(238,30,248,0.75); 
} 
.MC:nth-of-type(6){ 

} 

a{ 
    color: hsla(280, 90%, 20%, 1); 
    text-decoration:none; 
} 

a:hover{ 
    text-decoration:underline; 
} 

*, *:before, *:after { 
     box-sizing:inherit; 
    } 

img { 
    max-width:97.5%; 
    border-radius:15px; 
} 


#f1_container { 
    position: relative; 
    margin: 10px auto; 
    width: 27.5%; 
    height: 95%; 
    z-index: 1; 
    perspective: 1000; 
    border: solid 2px black; 
    border-radius:15px; 
    margin:1em; 
    font-size:1em; 
} 

#f1_container:hover #f1_card { 
    transform: rotateY(180deg); 
} 

#f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: all 0.666s linear; 
} 

.face { 
    display:flex; 
    flex-direction:column; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-transform:rotateY(0deg); 
} 
.face.back { 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    text-align: center; 
    backface-visibility:hidden; 
}

來源

2016-11-02 Cato