Trying to make input take all available width but not hide sibling. Works in Chrome not FF

Question

The goal is to have the box div aligned to the right of the ctrl and the input taking the rest of the available width.

Here's a demo. It renders as I want it to in Chrome. But in Firefox the "box" is hidden.

http://jsfiddle.net/1tgx3n2d/

<div id="ctrl">
    <input/>
    <div id="box"></div>
</div>

#ctrl
{
    width:130px; height:24px;
    position:relative;
    display:flex;
    overflow:hidden;

    box-sizing: border-box;
    border:solid 1px #CCC;
}
input
{
    box-sizing: border-box;
    background:#5ee;
    flex:1;
}
#box
{
    box-sizing: border-box;
    width:40px; height:22px;
    background: linear-gradient(#eee 0%, #eee 40%, #CDCDCD 100%);
}

How to get the same effect in FireFox?

Answer 1

The solution is to add min-width: 0; to the input. Updated fiddle

input {
    min-width: 0;
    box-sizing: border-box;
    background:#5ee;
    flex:1;
}