inputアドオン

inputのサイズをCSSで調整する手法が原因となり、inputの前後に要素を追加しつつ、inputフィールドを流動的にして余ったスペースを占有させることはほとんど不可能でした。

それを実現させるには、inputの実際の幅を取得するか、display:table-cellのようにそれ自身にいろいろな問題（特に、クロスブラウザーでアドオン内部に何かを絶対配置するのが難しい）を抱えている手法しかありません。

Flexboxならそれらの問題はありませんし、コードは自明にシンプルです。加えて、inputフィールドとinputアドオンを同じ高さにすることが出来ます。

Appended and Prepended Add-ons

The HTML

<!-- 前に追加 -->
<div class="InputAddOn">
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

<!-- 後に追加 -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
</div>

<!-- 両方 -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

CSS

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
  /* field styles */
}

.InputAddOn-item {
  /* item styles */
}

このデモで利用されているInputAddOnコンポーネントの完全なソース はGithubにあります。