Flex框不会将项目缩小为隐身

Question

这是我第一次使用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前缀是为了简洁示例而留下的。目前在最新的稳定版桌面Chrome中进行测试，之后也会在稳定/测试版Android Chrome和当前的Android Firefox中进行测试。

Answer 1

您需要为按钮指定弹性基础值：

http://jsfiddle.net/rrGp7/2/

#navigation-button {
    flex: 0 auto;
}