flex弹性如何实现内容溢出但不换行

在父元素上加flex-wrap: nowrap 表示不换行
在子元素上加flex-shrink:0 表示不收缩

<style>
    * {
        margin: 0;
        padding: 0
    }

    ul {
        list-style: none;
    }

    .list {
        width: 750px;
        height: 75px;
        background: #161618;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    li {
        color: #999999;
        font-size: 32px;
        line-height: 75px;
        flex-shrink: 0;
        margin-right: 50px;
    }

    li:nth-of-type(1) {
        margin-left: 24px;
        color: #a8875b;
    }
</style>


<body>
    <ul class="list">
        <li>精选 </li>
        <li>VIP俱乐部</li>
        <li>电影</li>
        <li>电视剧</li>
        <li>综艺</li>
        <li>动漫</li>
    </ul>
</body>

</html>