HTML輸入忽略基於flex的CSS屬性

Question

爲什麼輸入不能正確感知基於flex的基礎。下面是示出了如何輸入不其父塊之外服從和跨度一個最簡單的例子（參見jsfiddle）：

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

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

這裏是another, more comprehensive, case。

到底是什麼？ :)

Answer 1

input該元件具有稟width - 和柔性物品的寬度（沿彎曲軸）默認爲auto。復位此使用min-width: 0 - 見下面的演示：

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

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

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