flex布局还要使用overflow-x:scroll；的问题

子元素加上flex-shrink: 0;
定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。

所以，倘若给父元素设置了flex布局后，若要其子元素的width有效果，必须给子元素设置flex-shrink为0。

  	.box{
		width: 300px;
		overflow-x: scroll;
		display: flex;
	}
	.item{
		width: 200px;
		height: 50px;
		flex-shrink: 0;
	}
  </style>
</head>
	<div class="box">
		<div class="item" style="background-color: red">111</div>
		<div class="item"  style="background-color: blue">111</div>
		<div class="item"  style="background-color: black">111</div>
		<div class="item"  style="background-color: green">111</div>
		<div class="item"  style="background-color: pink">111</div>
		<div class="item"  style="background-color: yellow">111</div>
	</div>