Css Internet Explorer 11（IE11）上的flexbox文本换行

在下面的代码中，当使用InternetExplorer11时，这些段落不会被包装在小屏幕上。通过搜索解决方案，我发现如果

flex basis:100%

或

width:100%

应用于

.fix

div，则段落会被包装，但这种方法破坏了我的布局。可能的解决方案是什么

保持我的布局完整

段落将被包装在小屏幕上

Internet Explorer 11的输出：

.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.货柜-2{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
调整内容：灵活启动；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

您遇到了一些涉及flex和/或IE11的问题

试试这个：

.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.修理{
显示器：flex；
}
.货柜-2{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

您遇到了一些涉及flex和/或IE11的问题

试试这个：

.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.修理{
显示器：flex；
}
.货柜-2{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

我想我们可以自动设置

固定宽度。我们需要使用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）；
函数setStyle（）{
if（c1.offsetWidth c2width）{
fix.style.width=''；
}
}
window.onresize=setStyle
.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.货柜-2{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

我想我们可以自动设置
固定宽度。我们需要使用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）；
函数setStyle（）{
if（c1.offsetWidth c2width）{
fix.style.width=''；
}
}
window.onresize=setStyle
.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.货柜-2{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

经过长时间的研究，我发现如果
.fix
div具有
溢出：隐藏
样式，那么问题就解决了


.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.修理{
溢出：隐藏；
}
.货柜-2{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

经过长时间的研究，我发现如果
.fix
div具有
溢出：隐藏
样式，那么问题就解决了


.container-1{
显示器：flex；
证明内容：柔性端；
边框：1px纯红；
}
.修理{
溢出：隐藏；
}
.货柜-2{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
边框：1px纯蓝色；
}

中心对齐内容

这里有一些内容。这里有一些内容。这里有一些内容

设置。固定为100%宽度将破坏大屏幕上的布局。在.container-1上调整内容：柔性端不会有任何效果。@MirajulMomin，答案已修改。我明白了。好办法！设置。固定为100%宽度将破坏大屏幕上的布局。在.container-1上调整内容：柔性端不会有任何效果。@MirajulMomin，答案已修改。我明白了。好办法！这是一个解决方案，但HTML文档可能会多次出现这种类型的布局。每次使用这种方法都可能是低效的。是的，这是唯一的方法