inline-flex input element breaks to new line in IE11 - html

Question

I have a few html elements next to each other in a container positioned with display:inline-flex.
This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below).
It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge.
How can I get IE to display this correctly?
See jsFiddle for full html and css code to illustrate the problem: https://jsfiddle.net/vm2kcwd9/1/
.container {
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>

Answer 1

IE11 is known for having many flex-related bugs.
A simple and easy solution in this case would be to make the parent a flex container:
.container {
display: flex; /* new; forces all children into a single row */
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
/* vertical-align: top; <--- not necessary anymore */
justify-content: center;
align-items: center;
margin: 5px; /* for demo only */
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
Also, since you're making button elements into flex containers, consider this:
Flexbox not working on <button> element in some browsers

Answer 2

Easy solution just add display:flex to parent instead
.container {
display: flex;
justify-content: center;
/* align-items: center; you might not need this */
height: 2em;
}
.container>* {
height: 100%;
margin: 10px;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>