关于flexbox的一个问题

Question

flexbox布局有一个很奇怪的地方, 设置一个item的min-height: 0 会导致不同的排序情况

<a class="pdd-thumb" layout layout-align="center center">
  <div class="pdd-thumb__hd">
    <img :src="imageUrl" alt="" v-if="imageUrl">
  </div>
  <div class="pdd-thumb__bd" flex>
    <h4 class="pdd-thumb__title">{{title}}</h4>
    <slot name="desc">
      <p class="pdd_thumb__desc" v-if="desc">
        {{desc}}
      </p>
    </slot>
    
  </div>

</a>
.pdd-thumb {
  color: #000000;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  align-items: center;
  padding: 15px;
  position: relative;
}

.pdd-thumb__hd {
    margin-right: .8em;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

其中layout 属性选择器开启flexbox上下文, 有两个子项目 flex属性悬着器 具体值是 flex: 1;
如果给pdd-thumb__bd设置min-width: 0 的话 效果如下图

**如果取消掉这个值得话 第一个项目
缩为0
*

![图片上传中...]