3列显示：具有溢出的弹性布局：省略号

Question

试图让中间列具有灵活宽度的布局;它应该占用第一栏和最后一栏未占用的所有空间。

第一列总是50px，最后一列的宽度由其内容决定。如上所述，中间栏应该占用余数。

用显示器试过一些东西：flex但不能解决问题。

你可以看到我在这里试过的;

https://jsfiddle.net/qwxxdkpd/1/

但是，中间一列得满满当当，推动第三列淡出人们的视线。

正确的应该是中间一列被切断，因为我使用了以下内容;

#container .list .address { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    -webkit-text-overflow: ellipsis; 
    font-family: "Courier New"; 
} 

任何想法如何解决它;

看起来应该这样：

Icon|11111111111111111111111111111...|1.2 (end of line) 

Answer 1

重要组成部分，是对.address

#container .list ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
} 
 

 
#container .list li { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #a1d1b8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#container .list li > div { 
 
    vertical-align: middle; 
 
} 
 

 
#container .list .type { 
 
    padding-right: 15px; 
 
    flex: 0 0 50px; 
 
    background: green; 
 
} 
 

 
#container .list .type i { 
 
    font-size: 40px; 
 
} 
 

 
#container .list .details { 
 
    flex: 1; 
 
    overflow: hidden; 
 
    font-family: "Courier New"; 
 
} 
 
.address { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
#container .list .value { 
 
    padding-left: 15px; 
 
    font-size: 55px; 
 
} 
 

 
#container .list .details .date { 
 
    font-weight: bold; 
 
    margin-bottom: 5px; 
 
}

<div id="container"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li> 
 
     <div class='type'><i class='fa fa-arrow-circle-right'></i></div> 
 
     <div class='details'> 
 
      <div class='date'>date</div> 
 
      <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> 
 
     </div> 
 
     <div class='value'>1.2</div>   
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>