在IE11中包装flex项目已被破坏

Question

我正在尝试使用新的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

Answer 1

三年半之后遇到了类似的问题。当一个灵活的容器溢出并且没有给出它的大小时，有时IE会尝试增加容器的大小而不是包装项目（与线程创建者链接的文章形成对比，后者表示不再发生这种情况）。

在您的情况下，您可能想尝试将width: 100%;或实际上任何宽度值设置到容器中。

Answer 2

看起来你几乎每个元素都在调用display: flex;。只有需要灵活的容器才具有该属性。这就是我想出来的，它似乎按照你要求的方式工作。

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: black;
    font-family: Verdana sans-serif;
    font-size: 20px;
}

#content_wrapper {
    box-sizing: border-box;
    padding: 20px 20px;
    width: 100%;
    height: 100%;
}

#main_wrapper {
    display: flex;
    min-height: 20px;
    overflow: hidden;
    border: 5px solid red;
}

#right {
    flex: 1 auto;
    width: 400px;
    background: #cccccc;
}

fieldset {
    margin: 10px 0px;
}

.fieldset {
    background-color: green;
    border: 1px solid blue;
}

#pdf {
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
}


form {
    margin: 20px 20px;
}

.field {
    display: flex;
    margin: 10px 10px;
    border: 1px solid black;
    align-content: stretch;
    padding: 5px 5px;
}

.smallInput {
    /* flex: 1 0 0; */
}

.bigInput {
    /* flex: 2 0 0; */
}

input {
    flex: 2;
}

label {
    flex: 1;
    margin-right: 10px;
}

这是一个updated fiddle看到它在行动。