Flexbox文本包装在Internet Explorer 11 (IE11)上的应用。

Question

在下面的代码中，使用Internet Explorer 11时，小屏幕上的段落没有被包裹。通过搜索解决方案，我发现如果 flex-basis:100% 或 width:100% 适用于 .fix div，那么段落就会被包裹起来，但是这种方法破坏了我的布局。有什么办法可以解决这个问题？

1. 保持我的布局不变
2. 段落会在小屏幕上被包裹

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

这里是问题的解释

• Flex容器中的文本在IE11中不能被包住
• 无法滚动到溢出容器的flex项目的顶部。

Answer 2

我想我们可以自动设置 fix 宽度。我们需要使用JavaScript来设置它。如果窗口的大小调整为 container-1 宽度与 container-2 宽度，然后我们可以设置 fix 宽度为100%。如果我们重新调整尺寸，那么我们就会删除 fix 宽度。

关于工作演示，你可以参考下面的示例，它已经在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 鸿沟 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>