Flex box to not shrink an item to invisibility

Question

This is my very first usage of CSS flexbox layout. I have two items I want to align in a row, for a mobile page layout: A button and a text box. The button comes left and should take whatever space it normally needs. The textbox comes right and should fill all remaining space - but no more!

With this code, the textbox does fill almost the entire row, leaving only a few pixels left for the button which is by far not enough to show it completely. The button can't hold its necessary size against the stretched textbox. What's wrong?

<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 prefixes left away for brevity of the example. Testing in latest stable Desktop Chrome for now, later also in stable/beta Android Chrome and current Android Firefox.

Answer 1

You need to give your button a flex-basis value:

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

#navigation-button {
    flex: 0 auto;
}