Flexbox пункт выхода из контейнера

Question

без изменения размера моего монитора мой макет выглядит следующим образом (что в значительной степени правильно)

Однако, когда я изменить его размер вспыхнет контейнера

Я хочу, чтобы зеленая область, основной текст, продолжала сокращаться по мере увеличения текста или изменения размера экрана. Я не хочу, чтобы что-то еще изменилось и помогло. не хотите, чтобы он вырвался из контейнера. В зеленой зоне достаточно места для изменения размеров.

Вот ссылка на мой демо 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 на

flex-shrink: 1; 

см: http://jsbin.com/qolajanetesi/1/edit?css