不将某项收缩为不可见的Flex框

Question

这是我第一次使用CSS柔性盒布局。对于移动页面布局，我有两个项目要对齐:一个按钮和一个文本框。按钮左转，应该占用它通常需要的空间。文本框是正确的，并应填补所有剩余的空间-但没有更多！

使用这段代码，textbox几乎填充了整行，只留下了几个像素用于按钮，到目前为止还不足以显示它。按钮无法将其所需大小与拉伸的文本框相对应。怎么了？

<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;
}