Wrapping flex items in IE11 doesn't work

Question

I am trying to create a form layout with the capabilities of the new CSS3 Flexbox. The goal is to ensure that the elements in the field set are positioned correctly, while you change the number of elements in the field set, change the font size or size of the view. 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 posted it at http://jsfiddle.net/T4RL6/ . Here the view looks right, like Chrome and Firefox.

The most important part of CSS code:

.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 doesn't carry elements at all, so they end up with a #rightdiv. I am sure that it should work in IE11, and you do not need it -ms-flex-***: http://msdn.microsoft.com/de-de/library/ie/dn265027%28v=vs.85% 29.aspx

Answer 1

It looks like you are calling display: flex;for almost every item. Only a container that must be flexible must have this property. This is what I came up with, and it seems to work as you requested.

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

and here is an updated script to see it in action.

Answer 2

. , IE , ( , , , ).

width: 100%; .