彈性布局中，父元素寬度不固定，如何保證子元素橫向滾動(dòng)而不撐開(kāi)父元素？

使用彈性布局，我本意是做成如下頁(yè)面，右邊盒子div2的寬度是屏幕剩下的寬度，里面的ul有很多的li，可以橫向滾動(dòng)。

開(kāi)始布局，代碼如下

• html

    <div class="wrap">
        <div class="div1"></div>
        <div class="div2">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

• css

    .wrap{
        display: flex;
        width: 100%;
        height: 200px;
    }
    .div1{
        width: 500px;
        min-width: 500px;
        background: pink;
    }
    .div2{
        flex: 1;
        background: orange;
    }
    .div2 ul{
        width: 2000px;
        display: flex;
        overflow: scroll;
    }
    .div2 ul li{
        flex: 1;
        border: 1px solid red;
    }

結(jié)果做成了這樣

div2的寬度被子元素?fù)伍_(kāi)了，瀏覽器屏幕的寬度也被撐大了。

有什么辦法可以保證單屏，又可以讓子元素橫向滾動(dòng)呢？