子元素宽度如何撑开父元素宽度

一个横向滚动栏，子元素高度会自动撑开父元素的高度，但是好像子元素宽度不能自动撑开父元素的宽度。这是我们需要使用css使子元素宽度可以自动撑开父元素宽度，避免计算父元素的宽度，用到两个主要的css的属性是：（1）横向滚动布局 white-space: nowrap;（2）内部元素 display: inline-block。

代码

<style>
        .wrap{width:300px;height:100px;background:#000;overflow: hidden;}
        .box{white-space: nowrap;width:auto;display:inline-block;zoom:1}
        .box span{width:80px;height:100px;background-color: pink;display:inline-block;}
</style>
	/*最外层显示的盒子*/
    <div class="wrap">
    	/*被子元素自动撑开的盒子*/
        <div class="box">
        	/*子元素*/
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

效果如下