flex布局文字超出省略号（flex items min-width）

目标： 实现如图布局

实现

<div class="box">
    <div class="icon"></div>
    <div class="info">
      <div class="title">title</div>
      <div class="desc">descript</div>
    </div>
  </div>

.box {
      width: 200px;
      display: flex;
      align-items: center;
    }
    .icon {
      width: 45px;
      height: 45px;
      border-radius: 2px;
      background: gray;
      margin-right: 10px;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }

效果如下所示：

问题： 当descript太长时怎么实现文字超出后显示省略号， 实现如下

<style>
      .box {
        width: 300px;
        display: flex;
        align-items: center;
        border: 1px solid gray;
      }
      .icon {
        width: 45px;
        height: 45px;
        border-radius: 2px;
        background: gray;
        margin-right: 10px;
      }
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
      .desc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
  </style>
  <div class="box">
    <div class="icon"></div>
    <div class="info">
      <div class="title">title</div>
      <div class="desc">descript long very very long, descript long very very long</div>
    </div>
  </div>

效果如下：

可以看到因为文字太长，导致info框变大把icon框都挤没有了，显示这不时我们想要都效果。怎么解决呢，给 info 框加个 min-width: 0; 就可以了。

这是什么原理呢。

google后发现，原来flex items 都默认min-width的值是auto，导致宽度不能比内容的宽度小，所以才出现了上面的情况。

参考资料：

1. makandracards.com/makandra/66…

2. stackoverflow.com/questions/3…