html - 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