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

【问题标题】：flexbox text wrap on Internet Explorer 11 (IE11)Internet Explorer 11 (IE11) 上的 flexbox 文本换行
【发布时间】：2020-09-27 17:23:18
【问题描述】：

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

保持我的布局不变
段落将被包裹在小屏幕上

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>

【问题讨论】：

标签： css internet-explorer flexbox

【解决方案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>

以下是对问题的解释：

【讨论】：

将 .fix 设置为 100% 宽度会破坏大屏幕上的布局。在 .container-1 justify-content:flex-end 上不会有任何效果。
@MirajulMomin，答案已修改。
我明白了。很好的解决方案！

【解决方案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 中的结果如下：

【讨论】：

这是一个解决方案，但 HTML 文档可以有很多次出现这种类型的布局。对于每次出现应用此方法可能效率低下。
是的，这是迄今为止我能想到的唯一方法，它适用于您线程中的情况。如果有其他解决方案，我会继续研究。
我觉得JS没必要。请参阅我的答案以获得干净的 CSS 解决方案。
@MichaelBenjamin 很好的解决方案！

【解决方案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>

【讨论】：