0

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>
Gramin
  • 9
  • 5
  • In left-to-right writing mode, there's no such thing as overflow to the left. https://stackoverflow.com/a/38830775/3597276 – Michael Benjamin Sep 19 '17 at 10:36
  • It works in G-Chrome, FFox, etc. and there is overflow to the left without any changes of writing mode. I don't think that overflow direction changes like `rtl` are the solution, because it will cause another issues to do (and then it will overflow to the left but not to the right, the same problem). I simply need to correct the existing solution for IE 11. – Gramin Sep 19 '17 at 10:48
  • It's possible to render a scrollbar that goes left. My point is that such a function is *not an overflow*. It's just specialized scrolling. Overflow can only occur in the direction of the writing mode. – Michael Benjamin Sep 19 '17 at 13:02

1 Answers1

0

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • It works, thank you! I think it's the answer :) As I understood correctly, `.testimonials` should stretch by its width according to its content - is it possible to save the fixed width of `.testimonials` if it exists when `.testimonials` is overflowed? – Gramin Sep 19 '17 at 11:12
  • @Gramin To grab an elements value you use script ... and will update my answer with an explanation – Asons Sep 19 '17 at 11:18