フレックスボックス - "ラップなし"テキストの流体列

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/

すべてのヘルプは大歓迎です。

Answer 1

flex: 1とoverflow: hiddenを.centerの列に追加することができます。

また、flex: 0 0 350px;を設定した場合は、widthを定義する必要はなく、この場合は350px、またはflex-basisに固定します。

img { 
 
    max-width: 100%; 
 
} 
 
#container { 
 
    display: flex; 
 
    max-width: 900px; 
 
} 
 
.column.left { 
 
    flex: 0 0 350px; 
 
} 
 
.column.right { 
 
    flex: 0 0 350px; 
 
} 
 
.column.center { 
 
    flex: 1; 
 
    overflow: hidden; 
 
} 
 
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> 
 
    LONG LONG TEXT LONG LONG TEXT LONG LONG TEXT 
 
    </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>