HTML入力でフレックスベースCSSプロパティが無視されます

Question

入力がフレックスベースを正しく認識しません。ここで（jsfiddleを参照）入力が親ブロックの外に従わとまたがらない方を説明する最も単純な例である：ここでは

<div> 
    <input> 
    <input> 
</div> 

<style>  
    div { display: flex; width: 200px; border: 2px solid red; } 
    input { flex-basis: 50%; } 
</style> 

はanother, more comprehensive, caseです。

何ですか？ autoおよび（フレックス軸に沿って）フレックスアイテムの幅デフォルト - :)

Answer 1

input要素は、width instrinsicを有しています。 min-width: 0を使用して、このリセット - デモ下記参照：作品

div { 
 
    display: flex; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
} 
 

 
input { 
 
    flex-basis: 50%; 
 
    min-width: 0; /* ADDED */ 
 
}

<div> 
 
    <input> 
 
    <input> 
 
</div>