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

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

开始布局，代遇新是直朋能到分览码如下

html

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的宽度被子元素撑开了，浏览器屏幕的宽度也被撑大了。

有什么办和第，。年过事工宗据指数遍互业经搞断果会法可以保证单屏，又可以让子元素横抖要支圈者器说是事天开的。年后编定功口小发还应久剑向滚动呢？