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

看起来你几乎在所有元素上都在调用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可以看到它的实际效果。

Answer 2

三年半之后遇到了类似的问题。当一个灵活的容器溢出并且没有给出它的大小时，有时IE会尝试增加容器的大小而不是包装物品（与线程创建者链接的文章形成鲜明对比，后者表示赢得了＆＃39;发生了。）

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

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

2 个答案: