Flexbox的項目打破了集裝箱

Question

的不調整我的顯示器我​​的佈局，看起來是這樣的（這是非常正確的）

然而，當我調整它的量爆發容器

我希望綠色區域即主文本隨着文本變長或屏幕大小調整而不斷縮小。我不想要其他任何東西來調整和esp。不希望它突破容器。綠地有足夠的空間來調整大小。

下面就以我的演示http://jsbin.com/potalu/1/edit

鏈接如果你想看看此處的CSS：

.clear { clear: both; } 
.transaction { 
    background:#ccc; 
    display:flex; 
    align-content: flex-center; 
    align-items: center; 
    position:relative; 
    width:100%; 
} 
    .checkbox { 
    background: lighten(red, 40%); 
    width: 30px; 
    } 
    .checkbox .box { 
     width: 10px; 
     height:10p; 
     border: 1px solid orange; 
    } 
    .date { 
    background: lighten(blue, 30%); 
    width: 25px; 
    } 
    .description { 
    background: lighten(green, 60%); 
    padding-right: 10px; 
    flex-grow: 2; 
    } 
    .description-wrapper { 
     white-space:nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 

    } 
    .amount { 
    background: lighten(purple, 60%); 
    } 
    .txn-amount { 
    width: 100%; 
    text-align:right; 
    } 

Answer 1

只需添加：

flex-shrink: 0; 

你不希望所有領域（.checkbox，.date，.amount）並設置.description to

flex-shrink: 1; 

請參閱：http://jsbin.com/qolajanetesi/1/edit?css