当flex遇到white-space: nowrap; 排版就飞了的神奇问题 吐血

在做一个移动端排班的时候需要某一行的字超出的部分用省略号代替  然后写着发现后面排版乱了

HTML结构如下  我想让第二个span的内容加省略号

css正确的代码如下

.list {
        width: 100%;
        .item {
            width: 100%;
            height: 4rem;
            display: flex;
            background-color: #eee;
            margin: 0.1rem 0;
            .left {
                flex: 8;
                display: flex;
                flex-direction: column;
                padding: 0.15rem;
                box-sizing: border-box;
                min-width: 0;  //就是这行改变了
                .one {
                    flex: 1;
                    font-size: 0.36rem;
                    @extend %juzhong;
                   
                    span {
                        height: 100%;
                        
                        &:nth-child(1) {
                            flex: 3;
                        }
                        &:nth-child(2) {
                            flex: 7;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }

如果去掉了15行就会出现下图这种效果

加上排版就好了  

至于为什么我也不知道   痛苦~~~~~

望哪位大神知道原因告知一下   跪求