I need assistance in creating a flexbox layout with three columns. The left and right columns should have fixed widths, while the center column needs to have a fluid width to occupy the available space. However, the text within the center column is long and I want it to display ellipsis instead of wrapping.
Unfortunately, preventing the text from wrapping causes issues as the column does not adjust to the available space and overflows 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 {
// Need fluid width here
}
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>Visit this fiddle for reference: http://jsfiddle.net/2Lp8d80n/
Any assistance would be highly appreciated.