Looking to create a column layout using flexbox with three divs that span the full width of their parent container while maintaining a single line height. If the content in the center div overflows, I want it to display an ellipsis at the end.
Check out the demo here: http://jsfiddle.net/f14q15ey/
Here's the HTML:
<div class="flex">
<div class="col1">Column 1</div>
<div class="col2">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eos sed dolorum fugit! Nihil ratione laudantium a cumque vero natus excepturi praesentium error possimus eveniet tempore repudiandae inventore rerum porro?
</span>
</div>
<div class="col3">Column 2</div>
</div>
And here is the CSS:
.flex {
display: flex;
}
.col1 {
width: 25%;
flex: 0 0 25%;
}
.col2 {
flex: 1 1 auto;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: inline-block;
}
.col3 {
flex: 0 0 25%;
}
The layout works perfectly in Chrome and Safari, but Firefox seems to have an issue where the inner container expands in width, pushing the size outside the viewport. Any ideas on what could be causing this? Is it a bug in Firefox's implementation?