css省略号无效

Question

捣鼓半天也没弄出来，左侧div是固定宽度，右侧div宽度不固定。

<div v-for="(item, index) in scheduleList" :key="index" class="schedules-box" @click="toSchedule(item)">
 <div class="schedules-cell-time" :style="{ backgroundColor: item.color }">
 <p style="line-height:1.6">
 {{ item.scheduletime }}
 <br />
 星期{{ formatWeek() }}
 </p>
 </div>
 <div class="schedules-cell-text">
 <div class="schedules-cell-title">
 <p>时间：{{ item.scheduletime }} 星期{{ formatWeek() }}</p>
 <p>主题：{{ item.title }}</p>
 <p>
 备注：{{
 item.remark
 }}暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据暂无今日日程数据
 </p>
 </div>
 </div>
 </div>

.schedules-box {
     display: table;
     width: 100%;
     border: 1px solid #eee;
     margin-bottom: 15px;
     height: 100px;
     cursor: pointer;
         .schedules-cell-time {
             width: 300px;
             color: #fff;
             float: left;
             width: 220px;
             height: 100px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
     .schedules-cell-text {
         height: 100px;
         margin-left: 220px;
         width: 100%;
         overflow: hidden;
         .schedules-cell-title {
             text-align: left;
             padding: 0 20px;
             font-size: 14px;
             & > p {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 margin: 12px 0;
                 width: 100%;
             }
        }
    }
}

Answer 1

display table去掉

Answer 2

怎么还用table 布局