overflow-x: scroll;が効かない、スマホ対応用の横スクロールができない。

.small-image-areaのリスト画像をスマホ対応用で横スクロールで画像を見れるようにしたいのですが、横スクロールが発生してくれません。
横並びになっても、全体幅に画像が無理やり収まってしまいます。

<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) {
html{
	font-size:62.5%
}
body{
	font-size:1.6rem;
	font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
img{
 	max-width:100%;
	height:auto;
}
a{
	color:#000;
}
h2{
	text-align: center;
	font-size:1.4rem;
	font-weight:bold;
	margin: 0 0 28px;
}

/*headerエリア*/
nav{
	width: 100%;
	max-width: 100%;
	height: 80px;
}
.nav-list{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
h1{
	padding: 0;
	margin: 0;
}
.cart-icon{
	width: 60%;
	display: none;
}
.item-text{
	font-size:1.4rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	display: none;
}
.search-icon{
	display: none;
}
header{
	display: none;
}
.header-sp{
	display: block;
}
.nav-list{
	margin-left: 16px;
}
.menu-icon{
	margin-right: 16px;
	width: 8%;
}
.menu-icon-sp{
	margin-right: 16px;
}
/*/headerエリア*/

	
/*product-area*/

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

	/*画像エリア*/
	.mainvisual{
		width: 100%;
		margin: 0 auto;
	}
    .small-image-area{
	   display:-webkit-box;
	   display:-ms-flexbox;
	   display: flex;
	   overflow-x: scroll;
	   -webkit-overflow-scrolling: touch;
	   overflow-scrolling: touch;
	   scroll-snap-type: x mandatory;
	   padding:0 0 1em;
	   margin:0 0 2em 0;
    }
	.model-size{
		text-align: left;
		font-size:1.2rem;
		margin: 12px auto 12px;
		line-height: 1.3;
	}
	.smallimage{
	}
	.small-image{
		width: 100px;
		height: 100px;
		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;/*変化に掛かる時間*/
	}
	/*/画像エリア*/


	/*text-area*/
コード