Internet Explorer 11 (IE11) 上的 flexbox 文本换行

Question

在下面的代码中，使用 Internet Explorer 11 时，段落不会在小屏幕上换行。通过搜索解决方案，我发现如果 flex-basis:100% 或 width:100% 应用于 .fix div 然后段落被换行，但这种方法破坏了我的布局。可能的解决方案是什么

保持我的布局完整
段落将在小屏幕上换行

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>

Answer 1

您运行遇到了一些涉及 flex and/or IE11 的问题。

试试这个：

.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>

问题的解释如下：

Answer 2

我想我们可以自动设置fix宽度。我们需要使用JavaScript来设置它。如果 window 调整为 container-1 宽度与 container-2 宽度相同的大小，那么我们可以将 fix 宽度设置为 100%。如果我们调整大小，然后我们删除 fix 宽度。

工作demo可以参考下面的例子，已经在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>

IE 11 中的结果如下：

Answer 3

经过长时间的研究，我发现如果 .fix div 有 overflow:hidden 样式那么问题就解决了。

.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>

Internet Explorer 11 (IE11) 上的 flexbox 文本换行

flexbox text wrap on Internet Explorer 11 (IE11)

css

internet-explorer

flexbox