flexbox needs overflow in IE 11 - html

Question

I have a flexbox which should be overflowed by its children to the left and to the right side. Here is my code for this solution. It works in all browsers properly but it doesn't work in IE 11 (children overflow flexbox to the right side only).
I tried to solve this problem with overflow-x:visible for the section and the list, but it doesn't work. The overflow-x property in the body hides the horizontal scroll and it's OK for my task. As you can see, I've already used autoprefixer for my CSS but I didn't find the solution in prefixes. Is this a special behavior of IE flexbox overflow? :)
So my questions are why my solution doesn't work in IE 11 and what can I do to solve this problem?
body{
width: 1400px;
margin: 0 auto;
font-family: "Open Sans", "Arial", sans-serif;
overflow-x: hidden;
font-size: 16px;
line-height: 24px;
color: #999;
}
.visually-hidden{
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
}
.testimonials{
position: relative;
height: 576px;
background-color: #fafafa;
background-image: url("../img/quotes.png"),
url("../img/quotes-reversed.png"),
url("../img/worldmap.png"),
url("../img/worldmap.png");
background-repeat: no-repeat;
background-position: 115px 60px,
1140px 380px, -290px 205px, 530px -270px;
background-size: auto, auto, auto, auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: visible;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 100px;
}
.reviews-catalog{
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
overflow-x: visible;
}
.review{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
min-width: 470px;
height:243px;
background-color: white;
margin-left: 15px;
margin-right: 15px;
-webkit-box-shadow: 0px 3px 18px 0px rgba(0, 153, 255, 0.1);
box-shadow: 0px 3px 18px 0px rgba(0, 153, 255, 0.1);
}
.review:first-of-type{
margin-left: 0px;
}
.review:last-of-type{
margin-right: 0px;
}
.review:first-of-type::before,
.review:last-of-type::before{
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.6;
}
.review:first-of-type .review-photo,
.review:last-of-type .review-photo{
opacity: 0.6;
}
.review:first-of-type:hover .review-photo,
.review:last-of-type:hover .review-photo{
opacity: 1;
}
.review:first-of-type:hover::before,
.review:last-of-type:hover::before{
opacity: 0;
}
.review-photo{
display: block;
border-radius: 50%;
margin-top: -45px;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.review-author{
margin: 0;
margin-top: 30px;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.review-content{
margin: 0;
margin-top: 15px;
text-align: center;
max-width: 370px;
color: black;
}
<section class="testimonials">
<h2 class="visually-hidden">Other reviews</h2>
<ul class="reviews-catalog">
<li class="review">
<h3 class="review-author">Kevin Smith,</h3>
<p class="role">Pediatrics student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/kevin.png" alt="kevin's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Kevin Smith,</h3>
<p class="role">Pediatrics student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/kevin.png" alt="kevin's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Jane Lambert,</h3>
<p class="role">Psychiatry student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/jane.png" alt="jane's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Jane Lambert,</h3>
<p class="role">Psychiatry student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/jane.png" alt="jane's avatar" width="90" height="90"/>
</li>
</ul>
</section>

Answer 1

If you remove the flex properties from the .testimonials and add these 3, you will get the same result cross browsers, where the items center and overflow equally to the left/right
display: inline-block;
left: 50%;
transform: translateX(-50%);
This works like that, that the inline-block make it size by content, the left: 50% (together with the already set position: relative) position its left edge in the middle of its parent, in this case the body, and the transform: translateX(-50%) will move it 50% of its own width to left.
Stack snippet
body{
width: 1400px;
margin: 0 auto;
font-family: "Open Sans", "Arial", sans-serif;
overflow-x: hidden;
font-size: 16px;
line-height: 24px;
color: #999;
}
.visually-hidden{
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
}
.testimonials{
position: relative;
height: 576px;
background-color: #fafafa;
background-image: url("../img/quotes.png"),
url("../img/quotes-reversed.png"),
url("../img/worldmap.png"),
url("../img/worldmap.png");
background-repeat: no-repeat;
background-position: 115px 60px,
1140px 380px, -290px 205px, 530px -270px;
background-size: auto, auto, auto, auto;
/*
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: visible;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 100px;
*/
display: inline-block; /* added */
left: 50%; /* added */
transform: translateX(-50%); /* added */
}
.reviews-catalog{
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
overflow-x: visible;
}
.review{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
min-width: 470px;
height:243px;
background-color: white;
margin-left: 15px;
margin-right: 15px;
-webkit-box-shadow: 0px 3px 18px 0px rgba(0, 153, 255, 0.1);
box-shadow: 0px 3px 18px 0px rgba(0, 153, 255, 0.1);
}
.review:first-of-type{
margin-left: 0px;
}
.review:last-of-type{
margin-right: 0px;
}
.review:first-of-type::before,
.review:last-of-type::before{
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.6;
}
.review:first-of-type .review-photo,
.review:last-of-type .review-photo{
opacity: 0.6;
}
.review:first-of-type:hover .review-photo,
.review:last-of-type:hover .review-photo{
opacity: 1;
}
.review:first-of-type:hover::before,
.review:last-of-type:hover::before{
opacity: 0;
}
.review-photo{
display: block;
border-radius: 50%;
margin-top: -45px;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.review-author{
margin: 0;
margin-top: 30px;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.review-content{
margin: 0;
margin-top: 15px;
text-align: center;
max-width: 370px;
color: black;
}
<section class="testimonials">
<h2 class="visually-hidden">Other reviews</h2>
<ul class="reviews-catalog">
<li class="review">
<h3 class="review-author">Kevin Smith,</h3>
<p class="role">Pediatrics student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/kevin.png" alt="kevin's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Kevin Smith,</h3>
<p class="role">Pediatrics student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/kevin.png" alt="kevin's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Jane Lambert,</h3>
<p class="role">Psychiatry student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/jane.png" alt="jane's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Jane Lambert,</h3>
<p class="role">Psychiatry student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/jane.png" alt="jane's avatar" width="90" height="90"/>
</li>
</ul>
</section>