在IE11中包装flex项已损坏 [英] Wrapping flex items in IE11 is broken

问题描述

我正在尝试使用新的CSS3 Flexbox的功能来构建表单布局. 目的是在更改字段集中的元素数量，更改字体大小或更改视图大小时，字段集的元素可以正确排列. 表单布局应适用于所有现代浏览器:Chrome 35，Firefox 29和 IE 11 除了在IE 11中不起作用外，它看起来非常有前途.

我简化了代码，并将其发布在 http://jsfiddle.net/T4RL6/上. 这里的视图看起来像Chrome和Firefox一样正确.

最重要的CSS代码部分:

.fieldset {
    background-color: green;
    border: 1px solid blue;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;
}

但是IE 11根本不包装元素，因此它们用尽了#right div. 我很确定它可以在IE11中使用，并且您不需要-ms-flex-***: http://msdn.microsoft. com/de-de/library/ie/dn265027％28v = vs.85％29.aspx

解决方案

三年半后，才遇到类似的问题.当一个灵活的容器溢出并且没有给出其大小时，有时IE会尝试增加容器的大小而不是包装这些项目(与线程创建者链接的文章相反，该文章不再发生). /p>

根据您的情况，您可能需要尝试为容器设置width: 100%;或实际上是任何宽度值.

I am trying to build a form layout with the capabilities of the new CSS3 Flexbox. The goal is that the elements of a fieldset arrange themselves properly, while you change the number of elements in a fieldset, change the font-size, or change the view size. The form layout should work in all modern browsers: Chrome 35, Firefox 29 and IE 11 It looks very promising except that it does not work in IE 11.

I simplified the code and post it on http://jsfiddle.net/T4RL6/. Here view looks correct like Chrome and Firefox.

Most important CSS code part:

.fieldset {
    background-color: green;
    border: 1px solid blue;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;
}

But IE 11 does not wrap the elements at all, so they run out of the #right div. I am pretty sure it should work in IE11 and you don't need -ms-flex-***: http://msdn.microsoft.com/de-de/library/ie/dn265027%28v=vs.85%29.aspx

解决方案

Just ran into a similar problem three and a half years later. When a flexible container will overflow and its size is not given, sometimes IE will try to increase the container's size instead of wrapping the items (in contrast to the article linked by the thread creator, which states that won't happen anymore).

In your case you might want to try setting width: 100%;, or in fact any width value, to the container.

这篇关于在IE11中包装flex项已损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！