flex 单行展示遇到处理文本溢出

Question

预期效果图及错误示例：

错误1

错误2

场景描述：

图片中，左侧是一个文件名，右边一个查看按钮，两者的文字都可能会发生变化（**都不是定宽的**）。
- 如果没溢出按钮紧贴在文件名后面
- 如果溢出则省略展示文件名

问题：

flex布局无法兼顾两种情况, 需要手动处理溢出的情况。

线上代码：

https://codepen.io/konayukis/...

如何实现单行展示两个不定宽元素，且在溢出时只对某个元素省略展示。另一个元素展示不变？
不用flex布局也可以，可以提出解决方案。

Answer 1

.list {
  width: 300px;
  padding: 10px;
  outline: 1px solid #ccc;
}

.item{
  display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
}
.filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  white-space: nowrap;
  
}
.btn {
  margin-left: 10px;
  color: blue;
+  flex-shrink: 0;
}

Answer 2

已经找到解决办法，去掉flex-wrap: wrap;就可以了,
思维受限了，以为在用一行就需要用flex-wrap
有懂得老哥可以解释一下原理

Answer 3

少侠你忘了写overflow:hidden，当然你这还换行了，加一下white-space: nowrap;