フレックスボックスにテキスト入力フィールドが含まれている場合、フレックスボックスが広くなるのを防ぐにはどうすればよいですか？

次のCSS / HTMLは、私が望む結果をもたらします-行に3つのボックスがあり、中央のボックスは固定幅で、外側のボックスは両側のスペースを（同じ量で）消費します。

#container {
  display: flex;
}
#container > * {
  background: #efefef;
}
#container .fixed-width-40px {
  width: 40px;
  background: #ccc;
}
.fill-available-horizontal-space {
  flex-grow: 1;
}
<div id="container">
    <div class="fill-available-horizontal-space">aaa</div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space">ccc</div>
</div>

ただし、フォーム（およびその中のテキスト入力フィールド）を3番目のボックスに追加すると、3番目のボックスが広くなり、最初のボックスが短くなります。

1番目と3番目のボックスの幅を同じに保ちたいのですが、テキスト入力フィールドの導入によってこれが台無しになっています。

私がこれを克服する方法を知っていますか？

<div id="container">
    <div class="fill-available-horizontal-space">aaa</div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space">
        <form>
            <input type="text" name="test"/>
        </form>
    </div>
</div>