flex布局遇到white-space失效问题

        昨天在用vue做移动端单页面时，遇到一个问题，给子标签加上flex等于1，尝试多次无效，发现把white-space属性去掉，就能正常实现等宽自适应布局。

        初步定位问题为，white-space对flex弹性布局有影响。在网上找了一系列的资料，找到一个解决办法，给使用了white-space的子标签添加一个属性min-width: 0，可以解决问题。

HTML--伪代码

     

     
 
        
{{audio.data.name}}
        

          {{audio.data.user.name}} 发布在
          {{audio.data.channel.name}} 频道
        
     
     

css(stylus)--伪代码
.controls
        width 100%
        height 1.6rem
        line-height 1.6rem
        background-color rgba(0,0,0,.3)
        position absolute
        bottom 0
        left 0
        display flex
        .play-btn
            width 1rem
            height 1rem
            margin .3rem
            background-size cover
        .song-des
            flex 1
            min-width 0
            font-size 14px
            vertical-align: top;
            p
                text-align left
                color #fff
                line-height 20px
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
                font-size 11px
                em
                    color #6ed56c
        .barrage
            width 1.67rem
            height .67rem
            margin .5rem .3rem
            background-size cover
            border-radius 1.67rem