0
フレックスボックスではじめて動作し、特にIE（11）で問題が発生しました。フレックスボックスの問題
JSフィドルやスクリーンショット（IE/Firefoxの）：
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;
}