弹性布局中，父元素宽度不固定，如何保证子元素横向滚动而不撑开父元素？

Question

使用弹性布局，我本意是做成如下页面，右边盒子div2的宽度是屏幕剩下的宽度，里面的ul有很多的li，可以横向滚动。

开始布局，代码如下

• 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;
    }

结果做成了这样

div2的宽度被子元素撑开了，浏览器屏幕的宽度也被撑大了。

有什么办法可以保证单屏，又可以让子元素横向滚动呢？

Answer 1

div2加overflow:scroll就行了，正常应该是div2宽度等于ul宽度2000，多出来的40应该是ul的margin。