インラインフレックス入力要素がIE11の新しい行に壊れます

Question

display:inline-flexの位置にあるコンテナ内に、いくつかのhtml要素があります。

これはボタン要素でうまくいきますが、input type="text"要素を追加しようとすると、テキストボックスはボタンの下に配置されます（Internet Explorer 11のみ、IE10以下はわかりません）。

Firefox、Chrome、さらにはEdgeでも、期待通りに動作します（ボタンと同じ行のテキストボックス）。

これを正しく表示するにはどうすればよいですか？ 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が多くflex-related bugsを持つために知られている：完全なHTMLとCSSコードの

参照jsFiddleは、問題を説明します。

この場合は、シンプルで簡単な解決策は、親がフレックスコンテナ作ることであろう

：

.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>

また、あなたはフレックスコンテナにbutton要素を作っていることから、このことを考慮：

• Flexbox not working on <button> element in some browsers

Answer 2

簡単な解決策は、だけではなく、親に

.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>