inline-flex input element breaks to new line in IE11

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>