具有最大宽度的flex元素的FireFox问题

Question

以下是这个例子：

http://codepen.io/anon/pen/bVBNOE

.form-element__field-container {
  @include display(flex);
  max-width: 200px;
}

input {
  border: 1px solid black;
  border-left: none;
  border-right: none;
  padding: 10px;
}

.form-element__input-prepend {
  border: 1px solid black;
  border-right: none;
  padding-left: 10px;
}

.form-element__input-append {
  border: 1px solid black;
  border-left: none;
  padding-right: 10px;
}

<div class="form-element__field-container" >
  <span class="form-element__input-prepend">
    <span>$</span>
  </span>
  <input class="form-element__input-container form-element__input m-text m-has-prepend m-has-append" placeholder="???" value="23.43" type="text">
  <span class="form-element__input-append">
    <span>this is long</span>
  </span>
</div>

在chrome中，所有元素都包含在为根元素定义的200px宽度中，但在Firefox中，根元素中的元素等于224px并溢出根元素的200px宽度。最大的区别是在FireFox中输入元素的宽度为149px，但在Chrome中为117px。

任何人都知道会导致这个问题的原因吗？