html - フレックスボックス - 「折り返しなし」テキストの可変列

Question

3 列のフレックスボックス レイアウトを設定しようとしています。左右の列の幅は固定です。中央の列は、使用可能なスペースを埋めるために流動的な幅になっていますが、長いテキストが含まれているため、折り返して省略記号を使用する必要はありません。

残念ながら、ラップされていないテキストでは、列が使用可能なスペースを確保できず、レイアウト全体が親要素の境界を越えて押し出されます。

img {
    max-width: 100%;
}
#container {
    display: flex;
    max-width: 900px;
}
.column.left {
    width: 350px;
    flex: 0 0 350px;
}
.column.right {
    width: 350px;
    flex: 0 0 350px;
}
.column.center {
   // fluid width required
}

h1 {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

<div id="container">
  <div class="column left">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
  <div class="column center">
    <h1>
     This is long text. If overflow use ellipsis
    </h1>
  </div>
  <div class="column right">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
</div>

フィドルへのリンク: http://jsfiddle.net/2Lp8d80n/

どんな助けでも大歓迎です。