Html 在IE11中包装flex项目已损坏

我正在尝试使用新的CSS3 Flexbox功能构建表单布局。 这样做的目的是在更改字段集中的元素数、字体大小或视图大小时，字段集的元素能够正确排列。 表单布局应该适用于所有现代浏览器：Chrome 35、Firefox 29和IE 11 它看起来很有前途，只是在IE11中不起作用

我简化了代码，并将其发布在网站上。 这里的视图看起来像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;
}

但是IE11根本没有包装元素，因此它们没有

#right

div。 我非常确定它应该在IE11中工作，并且您不需要

-ms flex-***

：

---

看起来您正在调用

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;
}

下面是一个例子，让我们看看它的实际效果。
三年半后，我们遇到了一个类似的问题。当一个灵活的容器溢出并且没有给出它的大小时，IE有时会尝试增加容器的大小，而不是包装项目（与线程创建者链接的文章不同，该文章声明不再发生这种情况）

在您的情况下，您可能需要尝试设置
width:100%，或者实际上是任何宽度值，到容器。
但是如果需要嵌套的FlexBox呢？好问题。当您需要两个或多个项目彼此灵活配合时，父容器应
显示：flex。但是，如果子元素本身没有任何flex子元素，则不需要将其放在子元素上。