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>

score 7 · Accepted Answer · edited May 23 '17 at 12:25

7

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

edited May 23 '17 at 12:25

Community

1
1

answered Apr 15 '17 at 18:57

Michael Benjamin

346,931
104
581
701

Well, that was easy, thank you. Although, that slighty changes the behavior of the elements inside the container as well. For example: I had to add flex-shrink: 0; to the children to prevent them from getting shrunk (which does not occur when the container has no display: flex). – Preli Apr 15 '17 at 19:19
1

Yes, flex-shrink is enabled by default. Still, the benefits far outweigh any transitional adjustments. Now you don't need vertical-align. Now you can use flex properties. – Michael Benjamin Apr 15 '17 at 19:35

score 1 · Answer 2 · answered Apr 15 '17 at 18:59

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>

inline-flex input element breaks to new line in IE11

2 Answers2

Linked