text not wrapping in IE using flex box

Question

in chrome the flex box is working perfectly , i have to align an image and text side by side, i have used flex . But in IE the text is not wrapping up.

when i checked need to add a width of 100% to child div , since i have one div for image and another div for content where should i add the width of 100% , i tried another solution for flex:1 or flex-basis:100% neither not worked.

Please see the code

.students-section > div:last-child {
  margin-bottom:0;
}

.student-container{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.student-container .student-left-container .student-img-container {
    width: 120px;
    height:auto;
    margin-right: 10px;
}

.student-container .student-left-container .student-img-container img{
    max-width: 100%;
    max-height: 100%;
}

<div class="students-section">
<div class="student-container">
  <div class="student-left-container">
    <div class="student-img-container">
      <a target="_blank" href="#">
        <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg"/>
      </a>
    </div>
  </div>
  <div class="student-right-container">
    <div class="student-content-container"><p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p><div class="student-description">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum <a>00:00</a> <a class="check-more" target="_blank" href="#">  Check More</a></div></div>
  </div>
</div>
<div class="student-container">
  <div class="student-left-container">
    <div class="student-img-container">
      <a target="_blank" href="#">
        <img src="https://cdn.pixabay.com/photo/2016/03/07/09/34/kid-1241817_960_720.jpg"/>
      </a>
    </div>
  </div>
  <div class="student-right-container">
    <div class="student-content-container"><p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p><div class="student-description">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  <a>00:00</a> <a class="check-more" target="_blank" href="#"> Check More</a></div></div>
  </div>
</div>
</div>

Doubt it will matter, but IE handles flex defaults differently. Try adding flex: 0 0 auto; to student-container. — Rick Calder, Jun 19 '18 at 07:48
@RickCalder that didn't worked , when i checked . Some of them says adding width to 100% for the child div, but in this case where should i add the width:100% https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11 — Learner, Jun 19 '18 at 07:52
I just created a page with exactly your code and it works perfectly in IE, the error is somewhere else. https://imgur.com/a/aRyf0oe — Rick Calder, Jun 19 '18 at 07:56
@RickCalder i have a div to the right of students but in chrome its working perfectly , the text is wrapping up — Learner, Jun 19 '18 at 08:55
Can you add a screenshot of what is happening and your complete code? — Rick Calder, Jun 19 '18 at 08:57
@RickCalder you can check this https://codepen.io/mmdileepthomas/pen/zaPgYm — Learner, Jun 19 '18 at 09:09
Try to add width to the outer containers. https://codepen.io/treesa/pen/XYVyWN — Treesa, Jun 19 '18 at 09:21
I'm at a complete loss as to what the actual problem is here. Those containers in your codepen wrap the text just fine too. What do you mean by "wrap up" Please provide a screenshot of what you're seeing in IE and Chrome. — Rick Calder, Jun 19 '18 at 10:06
like the text is taking the width like the text should be in line by line not in a single line — Learner, Jun 19 '18 at 10:08
Try this method https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11 — Treesa, Jun 20 '18 at 00:47

text not wrapping in IE using flex box

0 Answers0