Flexbox issues with IE 11

Question

Hy there,

I'm about to implement a module which needs to position labels & inputs with pure CSS and am using flexbox for it.

I just run into some troubles with IE 11 which seems to render things different than the latest versions of FF (v28) and Chrome (v34):

FF & Chrome:

IE 11:

Here are 3 obvious problems which I've also marked in the image:

1. IE 11 doesn't seem to adjust the height of the container DIV correctly
2. The width of the second caption is not correct (width: 200px;)
3. The position of the first caption is not correct (-ms-flex-order: 2;)

Here's the full code and a working example (http://jsfiddle.net/NTV62/5/):

HTML:

<div class="caption-bottom">
    <label for="text1">It's the caption:</label>
    <input id="text1" type="text"/>
</div>
<br>
<div class="caption-left">
    <label for="text2">It's the caption:</label>
    <input id="text2" type="text"/>
</div>

CSS:

div {
    background: lightgreen;

    -webkit-align-self: stretch;
    align-self: stretch;

    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0 !important;

    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

div.caption-top, div.caption-bottom {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

label {
    width: 200px;
    margin: 4px;

    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
}

div.caption-left label, div.caption-top label {
    -webkit-box-ordinal-group: 0;
    -moz-box-ordinal-group: 0;
    -ms-box-ordinal-group: 0;
    -ms-flex-order: 0;
    order: 0;
}

input {
    margin: 4px;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
}

I'd really appreciate if someone could help me out with this or at least point me in the right direction ;)

Thanks

---

Edit:

I just realized that I wasn't actually testing with IE 11 but IE 10 and the problem was solved by using the flex-basis vals mentioned in the accepted answer and setting the label to display: block

Answer 1

May be you are running IE in some compatibility mode ?

For me, it displays most of your fiddle ok. The only issue being the input height; I solved it like this

input {
    margin: 4px;
    flex: 16px 1;    // added 16px as flex-basis
}

fiddle