Wrapping flex items in IE11 is broken

Question

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

Answer 1

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.

Answer 2

It looks like you are calling display: flex; on nearly every element. Only the container that needs to be flexible should have that property. Here's what I've come up with, and it seems to be working the way you've 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's an updated fiddle to see it in action.