关于display:flex碰上white-space nowrap 影响布局的问题
缘由：想用flex实现，右边固定，左边文字自适应，并自动换行。
问题：文字撑满不换行
布局效果如下图：
代码如下：
html
<div class="row flex"><div class="col-l">服务单号</div><div class="col-r flex justify-c-between"><div class="text">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div><div class="btn-copy">复制</div></div></div>
css
.flex {display: flex;}.justify-c-between {justify-content: space-between;}.btn-copy {padding: 2px 6px;border: 1px solid #333;border-radius: 8px;}.col-r {flex: 1;overflow: hidden;.text {flex: 1;word-break: break-word; /*重点加这句，换行*/}.btn-copy {flex: 0 0 108px;}}
修复效果：
小结
基础功荒废注意积累，有多久没写高质量的blog了？
参考资料：
/article/detial/2460
/weixin_4183/article/details/106415639
flex 布局 左侧固定右侧自适应 超出内容隐藏，并保证布局效果
做一个左边图片宽度固定，右边宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响
解决办法，父div设置min-width:0即可
flex: 1;min-width: 0;
w3c上面是这样说的
By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).
因为设置了white-space:nowrap，所以content没法收缩了，设置0后就有了固定尺寸就可以收缩了
