css - flexbox 不会将元素缩小到不可见

Question

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

使用这段代码，文本框几乎填满了整行，只为按钮留下了几个像素，这远远不足以完全显示它。该按钮无法在拉伸(stretch)的文本框上保持其必要的大小。怎么了？

<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

你需要给你的按钮一个 flex-basis 值:

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

#navigation-button {
    flex: 0 auto;
}