bivainis
12/15/2015 - 8:44 AM

Variable column width with truncation, when one of the columns is of variable width. Using flexbox

Variable column width with truncation, when one of the columns is of variable width. Using flexbox

//
// as seen on: http://jsfiddle.net/Blender/kXMz7/1/
// similar solution here: http://codepen.io/stefsullrew/pen/WvWWqJ/
// link above might solve issues with iOS
// 
.parent-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.left-text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    
    // works without this too?
    min-width: 0;
}

.right-text-div {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
    text-align: right;
    // white-space: nowrap;
}