Flex 佈局裡 input 寬度最小 150px 的問題， 瀏覽器 BUG?

匡匡發表於2018-12-15
Flex瀏覽器

今天在使用 flex 佈局時， 發現當 flex 佈局容器比小（小於 150px ）時，裡面的 input[text] 的寬度會比容器寬：

<style> 
#main
{
	width:120px;
	height:30px;
	border:1px solid black;
	display:flex;
	padding: 5px;
}


</style>


<div id="main">
  <input type="text" style="flex-grow:1;float:left" />
	<button>OK</button>
</div>

　　

經過測試， 發麵 flex 容器下面的 input 最小寬度是 150px, 設定 min-width， display, float 都沒有用， 寬度就是有 150px, 如果給 input 設定一個固定寬度, 那又不能自適應容器的大小。

各種測試發現都不行， 最後把 input 的 width 設定為 0， 竟然就可以了， 這到底是哪種意思？

 

<input type="text" style="width:0;flex-grow:1" />

相關文章