flexbox text wrap on Internet Explorer 11 (IE11)

Question

In the code below the paragraphs are not getting wrapped on small screen while using Internet Explorer 11. By searching for solutions I found that if flex-basis:100% or width:100% is applied on .fix div then the paragraphs get wrapped but this method breaks my layout. What can be the possible solution that will

Keep my layout intact
The paragraphs will get wrapped on small screen

Output of the Internet Explorer 11:

.container-1 {
  display: flex;
  justify-content: flex-end;
  border: 1px solid red;
  
}

.container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid blue;
}

<div class='container-1'>
  <div class='fix'>
    <div class='container-2'>
      <p>Center Aligned Content</p>
      <p>Some content goes here. Some content goes here. Some content goes here. </p>
    </div>
  </div>
</div>

Michael Benjamin · Accepted Answer · 2020-06-09T12:19:46.593

3

You're running up against a couple of problems involving flex and/or IE11.

Try this:

.container-1 {
  display: flex;
  justify-content: flex-end;
  border: 1px solid red;
}

.fix {
  display: flex;
}

.container-2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid blue;
}

<div class='container-1'>
  <div class='fix'>
    <div class='container-2'>
      <p>Center Aligned Content</p>
      <p>Some content goes here. Some content goes here. Some content goes here. </p>
    </div>
  </div>
</div>

Here's an explanation of the problems:

edited Jun 09 '20 at 12:19

answered Jun 08 '20 at 19:18

Michael Benjamin

346,931
104
581
701

Setting .fix to 100% width will breaks layout on large screen. On .container-1 justify-content:flex-end will not has any effect. – Mirajul Momin Jun 09 '20 at 04:04
@MirajulMomin, answer revised. – Michael Benjamin Jun 09 '20 at 12:20
1

I got it. Good solution! – Mirajul Momin Jun 10 '20 at 15:03

score 1 · Answer 2 · answered Jun 09 '20 at 03:22

I think we can automatically set the fix width. We need to use JavaScript to set it. If the window is resized to a size that container-1 width is the same as container-2 width, then we can set the fix width to 100%. If we resize back, then we remove the fix width.

For the working demo, you could refer to the sample below which has been tested in IE 11:

var c1 = document.getElementsByClassName('container-1')[0];
var c2 = document.getElementsByClassName('container-2')[0];
var fix = document.getElementsByClassName('fix')[0];
document.getElementById('c2').innerText = c2.offsetWidth;
var c2width = parseFloat(document.getElementById('c2').innerText);

function setStyle() {
  if (c1.offsetWidth <= c2.offsetWidth) {
    fix.style.width = '100%';
  }
  if (c2.offsetWidth > c2width) {
    fix.style.width = '';
  }
}

window.onresize = setStyle;

.container-1 {
  display: flex;
  justify-content: flex-end;
  border: 1px solid red;
}

.container-2 {
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid blue;
}

<div class='container-1'>
  <div class='fix'>
    <div class='container-2'>
      <p>Center Aligned Content</p>
      <p>Some content goes here. Some content goes here. Some content goes here. </p>
    </div>
  </div>
</div>
<div id="c2" style="display:none"></div>

The result in IE 11 is like below:

That is a solution but an HTML document can has many occurrences of this type of layout. For every occurrence applying this method maybe inefficient. — Mirajul Momin, Jun 09 '20 at 04:15
Yes, that's the only way I can come up with till now and it's applicable to the situation in your thread. I'll continue to research if there's any other solution. — Yu Zhou, Jun 09 '20 at 06:52
I don't think JS is necessary. See my answer for a clean CSS solution. — Michael Benjamin, Jun 09 '20 at 12:21

score 0 · Answer 3 · answered Jun 10 '20 at 15:00

After long research I found that if .fix div has overflow:hidden style then the problem is solved.

.container-1 {
  display: flex;
  justify-content: flex-end;
  border: 1px solid red;
}

.fix {
  overflow: hidden;
}

.container-2 {
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid blue;
}

<div class='container-1'>
  <div class='fix'>
    <div class='container-2'>
      <p>Center Aligned Content</p>
      <p>Some content goes here. Some content goes here. Some content goes here. </p>
    </div>
  </div>
</div>

flexbox text wrap on Internet Explorer 11 (IE11)

3 Answers3