flex布局超出屏幕后显示省略号

flex布局，列表模块，中间区域文字超出省略

<div class="box">
        <div class="left-container">
            <img width=100 height=100 :src="xxxxxxx">
        </div>
        <div class="center-container">
            <div class="title">标题</div>
            <div class="des">描述</div>
            <div class="tip flex">
                标签
            </div>
        </div>
        <div class="right-container">
            <div class="rigth-1"></div>
            <div class="rigth-2"></div>
            <div class="rigth-3"></div>
        </div>
    </div>

.flex {
    display: flex;
}
.left-container {
    width: 162px;
    height: 162px;
    background-color: #666;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
}
.center-container {
    flex: 1;
    width: 0;
    height: 100%;
    color: #5C6373;
    margin-left: 12px;

    .title {
        .font(32);
        color: #11141A;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .des,
    .tip {
    	font-size: 12px;
    }

    .tip {
        align-items: center;
    }
}

.right-container {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    align-items: flex-end;
    justify-content: space-between;
}

效果