[Black_Star]

Бодрый пень уважаемые. Возник интересен в реализации фичи по заполнению одного большого дива, дивами поменьше при условии того что б их сумарная величина размеров не была больше за величину большого дива.
Приведу код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="square">
			<div id="minSquare">
				<div id="first">
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
					<div class="one"></div>
			
				</div>
			</div>
		</div>

#square {
		width: 600px;
		height: 600px;
		border: 1px solid black;	

}

#minSquare {
	position: relative;
	margin: 5%;
	width: 500px;
	height: 500px;
	border: 1px solid black;
	background-color: yellow;
	/*overflow: hidden;*/
		
}

#first {
	position: absolute;
	height: 100%;
	width: 500px;
	margin-top: -2%;
	z-index: 1;

}

#second {
	position: absolute;
	height: 100%;
	width: 500px;
	margin-left: 4%;
	
	z-index: 2;

	perspective: 200px;
}
.one {
	width: 5%;
	height: 5%;
	background-color: red;
	border: 1px solid black;
	


.one:hover {
  	/*perspective: 100px;*/
	transform-origin: right; 
	transition: transform 0.5s;
	transform: rotateY(60deg);
	background-color: white;
}

window.onload = function() {

		$(function() {

				$('#minSquare').append('<div id="second">')

				$('#second').css({'width': '100%', 'height': '100%'});

				var widthOne = $('.one').width();
				var heightOne = $('.one').height();
				console.log('width of One block =' + widthOne);
				console.log('heigh of One block =' + heightOne);

				var rowWidth = $('#second').width();
				var rowHeight = $('#second').height();

				console.log('all Long #second = ' + rowHeight);

				var full_height = $('.one').outerHeight();
				;

				while (rowHeight > full_height) {

						$("#second > div ").each(function () {

								full_height = $(this).height() + full_height;
						});

						$('#second').append('<div class="one">')

						console.log('sum all Height div-es =' + full_height);

				}

		})
			
}

Я не понимаю почему мой цикл отрисовывает только 7 div-ов хотя по логике должен чуть меньше 20 при данных значениях w/h у класса One. подскажите пожалуйста где я туплю.

И ещё вопрос - как этими красными квадратиками заполнить пространство по горизонтале ?