为什么flexbox容器中的html输入字段隐含了最小尺寸？

Question

我正在尝试使用Flexbox容器中右侧的两个按钮来布局html输入字段。我想要的行为是按钮是固定宽度，输入字段增长/收缩以填充剩余空间。我让它工作正常，直到屏幕缩小到一定的大小，此时输入字段停止收缩，按钮被推离屏幕右侧。这似乎只发生在输入字段而不是div。

以下是演示此问题的示例html：

<div class="container">
  <input class="flexitem" placeholder="Fixed Item" />
  <div class="fixeditem">Item 1</div>
  <div class="fixeditem">Item 2</div>
</div>

和css：

.container {
    display: flex;
    background-color: yellow;
    padding: 5px;
    margin-bottom: 10px;
}

.flexitem {
    flex: 1 1 auto;
}

.fixeditem {
    flex: 0 0 auto;
    background-color: red;
    margin: 0 2px;
}

真正奇怪的是，如果我在flexitem类中添加“width：50px”，它就可以了。这就像输入字段具有隐含的最小宽度。

这是一个演示问题和“修复”的傻瓜。 plunkr

任何人都知道为什么会这样？