Flexbox的项目打破了集装箱

的不调整我的显示器我的布局，看起来是这样的（这是非常正确的）Flexbox的项目打破了集装箱

enter image description here

然而，当我调整它的量爆发容器

enter image description here

我希望绿色区域即主文本随着文本变长或屏幕大小调整而不断缩小。我不想要其他任何东西来调整和esp。不希望它突破容器。绿地有足够的空间来调整大小。

链接如果你想看看此处的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; 
    }

来源

2014-10-03 Oscar Godson