List of products with Carousel and flexbox

Question

I am in need of a help to display a responsive product list that initially will be 4 x 4 on computer screens (can be changed as needed). The code I have displays the flex inline items, but I need it to display in columns and when max-height is reached the width is increased in order to create the desired effect.

$(".js-carousel").each(function(){
	var $carousel = $(this),
		$carouselContainer = $carousel.find(".js-carousel-container"),
		$carouselList = $carousel.find(".js-carousel-list"),
		$carouselItem = $carousel.find(".js-carousel-item"),
		$carouselButton = $carousel.find(".js-carousel-button"),
		setItemWidth = function(){
			$carouselList.removeAttr("style");
			var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
			$carouselList.css("width", curWidth);
		},
		slide = function(){
			var $button = $(this),
				dir = $button.data("dir"),
				curPos = parseInt($carouselList.css("left")) || 0,
				moveto = 0,
				containerWidth = $carouselContainer.outerWidth(),
				listWidth = $carouselList.outerWidth(),
				before = (curPos + containerWidth),
				after = listWidth + (curPos - containerWidth);
			if(dir=="next"){
				moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
			} else {
				moveto = (before >= 0) ? 0 : curPos + containerWidth;
			}
			
			
			$carouselList.animate({
				left: moveto
			});
		};
	$(window).resize(function(){
		setItemWidth();
	});
	setItemWidth();
	
	$carouselButton.on("click", slide);
});

.carousel{
	padding: 0 30px;
}
.carousel__button--prev, .carousel__button--next{
	position: absolute;
	top: 0;
	bottom: 0;
}
.carousel__button--prev{
	left: 0;
}
.carousel__button--next{
	right: 0;
}
.carousel__container {
	overflow: hidden;
	height: 200px;
}
.carousel__list{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.carousel__list.unwrap{
	flex-wrap: nowrap;
}
.carousel__item{
	flex: 1 0 250px;
/* 	max-width: 300px; */
	height: 200px;
	background-color: #ccc;
	text-align: center;
	line-height: 100px;
	border: 1px solid #fff;
}

<div class="carousel js-carousel">
	<div class="carousel__container js-carousel-container">
		<div class="carousel__list js-carousel-list">
			<div class="carousel__item js-carousel-item">1</div>
			<div class="carousel__item js-carousel-item">2</div>
			<div class="carousel__item js-carousel-item">3</div>
			<div class="carousel__item js-carousel-item">4</div>
			<div class="carousel__item js-carousel-item">5</div>
			<div class="carousel__item js-carousel-item">6</div>
			<div class="carousel__item js-carousel-item">7</div>
			<div class="carousel__item js-carousel-item">8</div>
			<div class="carousel__item js-carousel-item">9</div>
			<div class="carousel__item js-carousel-item">10</div>
		</div>
	</div>
	<div class="carousel__nav">
		<button class="carousel__button--prev js-carousel-button" data-dir="prev">&lt;</button>
		<button class="carousel__button--next js-carousel-button" data-dir="next">&gt;</button>
	</div>
</div>