Flex in I.E. 10 not putting items in rows

Question

I have a section of flex html that is working perfectly in chrome and firefox, but in I.E. 10 is refusing to align into a row:

<div id="option-information-container" layout="row">
    <div class="extra-info-container" layout="row" flex="100" layout-padding layout-align="start start">
        <div id="part-note-info-image" class="extra-info-image" flex="0"></div>
        <div class="message-container" flex="90">
            <div class="message-header" layout-padding translate>Detail Notes</div>
            <div ng-repeat="partNote in currentPage.pageData.PartNotes">{{partNote.PartNoteText}}.</div>
        </div>
    </div>
</div>

CSS:

#part-note-info-image {
    background-size: contain;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QkNGQTE1QTE3NzAxMUU0QjcxOUQ4RjE1NzBGOUZDOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QkNGQTE1QjE3NzAxMUU0QjcxOUQ4RjE1NzBGOUZDOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQ0ZBMTU4MTc3MDExRTRCNzE5RDhGMTU3MEY5RkM5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRCQ0ZBMTU5MTc3MDExRTRCNzE5RDhGMTU3MEY5RkM5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+nrGB7QAADupJREFUeNrsXQuUVVUZ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');
    background-repeat: no-repeat;
}

.extra-info-image {
    height: 20px;
    width: 20px;
}

In Chrome and Firefox, the image and Detail Notes appear side by side, in I.E. Detail Notes is on the row below the image. I cannot figure out how to get the two to occupy the same row. The spacing on the line shows there is room available for the Detail Notes container to fit.

Edit: Here's a codepen reproducing the issue, with the JS abstracted out: http://codepen.io/anon/pen/eBNBGZ

When using flexbox, be aware of compatibility with older browsers: http://stackoverflow.com/q/35137085/3597276 — Michael Benjamin, Nov 07 '16 at 17:37
Alright...well thanks. I'll play around with the docs from that and see if I can make headway. — Susannah Potts, Nov 07 '16 at 18:06
Well everything has since collapsed into a single small space on I.E... — Susannah Potts, Nov 07 '16 at 19:15

score 1 · Accepted Answer · answered Nov 07 '16 at 23:30

E10 is not implementing full version of flexbox, but old specification (tweener). You can read more here. To use flexbox on IE10 you would need to use prefixed version:

.flex {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

I would suggest that you use autoprefixer tool with some build tool like gulp or grunt. In autoprefixer options remember to target IE10 and above.

options: {
  browsers: ['ie >= 9']
}

Thank you Randall Flagg. I hope you know Roland will catch you next time, he has the horn now. — Susannah Potts, Nov 08 '16 at 16:39

Flex in I.E. 10 not putting items in rows

1 Answers1