Flexbox - liquid column with no wrapper text

Question

I am trying to customize a flexbox layout with three columns. The left and right columns have a fixed width. The center column has a width of liquid to fill the available space, but it contains a long text that should not be wrapped and use ellipses instead.

Unfortunately, the non-wrapped text does not allow the column to accept the available space and pushes the entire layout beyond the parent element.

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> 

Link to fiddle: http://jsfiddle.net/2Lp8d80n/

Any help is appreciated.

Answer 1

You can simply add flex: 1 and overflow: hidden in the .center column.

Also when you install flex: 0 0 350px; , there is no need to define width , the width is fixed at 350px or in this case 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>