柔性框,不会将项目缩小到不可见

这是我第一次使用CSS flexbox布局。对于移动页面布局,我有两个项目要对齐:一个按钮和一个文本框。按钮位于左侧,应该占据它通常需要的任何空间。文本框显示正确,应该填满所有剩余空间,但不能再多了!

使用这段代码,文本框几乎填满了整个行,只剩下几个像素用于按钮,这还不足以完全显示它。按钮无法在拉伸的文本框中保持其所需的大小。发生了什么?

<div id="mobile-tools">
<input type="button" id="navigation-button" ...>
<div id="search-box"><input type="search" ...></div>
</div>

#mobile-tools
{
    display: flex;
}
#navigation-button
{
    flex: 0;
}
#search-box
{
    flex: 1;
}
#search-box input[type="search"]
{
    width: 100%;
}

为了简化示例,Webkit前缀省略了。目前在最新的稳定桌面浏览器中进行测试,稍后也在稳定/测试版Android Chrome和当前的Android Firefox中进行测试。