CSSで画像に横スクロールを発生させたい

レスポンシブデザインで、スマホのみ横スクロールで画像を表示したいと思います。

ulタグ以下の画像を横スクロールで表示できるようにしたいのですが。
overflow-x: scroll;が効いているのかよく把握できませんでした。
ulタグのwidthを200%にして限界一杯横幅を広げると、画面全体に横スクロールが発生し、かといって90%にすると折り返しが発生してしまい横並びになりません。

原因がいまいちわからないので、詳しい方教えていただきたいです。よろしくお願いします。

.small-image-area{
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 12px 8px;
	display: -ms-flexbox;
	display: flex; 
	white-space:nowrap;
	width: 200%;

}

<section>
	<div class="product-area">
		<div class="product-imagearea">
			
			<p class="mainvisual">
				<img src="images/dairku6のコピー.jpg" alt="メインビジュアル">
			</p>
			
			<p class="model-size">model : 身長174cm 細身<br>
			着用サイズ：FREE</p>
			
			<ul class="small-image-area">	
				<li class="smallimage">
					<a href="">
						<img src="images/dairiku1.jpg" alt=""  class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairiku2.jpg" alt="" class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairiku3のコピー.jpg" alt="" class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairiku4のコピー.jpg" alt="" class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairiku5のコピー.jpg" alt="" class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairiku10のコピー.jpg" alt="" class="small-image">
					</a>
				</li>		
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairku7のコピー.jpg" alt="" class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairku9のコピー.jpg" alt="" class="small-image">
					</a>
				</li>
				
				<li class="smallimage">
					<a href="">
						<img src="images/dairku6のコピー.jpg" alt="" class="small-image">
					</a>
				</li>				
			</ul>
		</div>
			
コード

@media screen and (max-width:480px) {
/*product-area*/

	/*全体幅*/
	.product-area{
		width: 90%;
		display: block;
		justify-content: center;;
		margin: 48px auto 48px;
	}
	.product-imagearea{
		width: 100%;
	}
	.product-text-area{
		width: 100%;
	}
	/*全体幅*/
	

	/*画像エリア*/
	.mainvisual{
		width: 100%;
		margin: 0 auto;
	}
	.small-image-area{
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 12px 8px;
		display: -ms-flexbox;
		display: flex; 
		white-space:nowrap;
		width: 100%;
 
	}
	.model-size{
		text-align: left;
		font-size:1.2rem;
		margin: 12px auto 12px;
		line-height: 1.3;
	}
	.smallimage{
		  display: inline-block;  /* 横並びにする指定 */		
	}
	.small-image{
		width: 72px;
		height: 72px;
		object-fit: cover;
	}

	.smallimage a img {
		display: block;
		transition-duration: 0.3s;	/*変化に掛かる時間*/
	}
	.smallimage a img:hover {
		transform: scale(1.0);	/*画像の拡大率*/
		transition-duration: 0.3s;	
		opacity: 0.3;/*変化に掛かる時間*/
	}
	/*/画像エリア*/
}
コード

行動規範の内容に同意します

回答1件

ベストアンサー

サンプルで確認してみましたが、width: 100%; で横スクロールできました。

css
1    .small-image-area{
2        overflow-x: scroll;
3        -webkit-overflow-scrolling: touch;
4        padding: 0 0 12px 8px;
5        display: -ms-flexbox;
6        display: flex; 
7        white-space:nowrap;
8        width: 100%; /* 200%; */
9        flex-wrap: nowrap !important; /* なくてもスクロールできたが、念のために追加 */
10    }