父元素使用flex子元素width失效？

<div style="width:100px;">
  <div class="box">
   <div class="status"></div>
   <div class="text">天津饭饭天津饭饭</div>
   <button class="btn">测试</button>
  </div>
</div>
.box{
  display: flex;
  align-items: center;
}
.status{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: rgb(209, 48, 15);
}
.text{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.btn{
  transform: scale(.6);
}

demo: https://jsfiddle.net/uxc68jop/同样的代码在demo中没有问题，在项目中第一个元素width就失效了？