Javascript-форум - Разумное поведение при изменении размера

Добрый вечер!
У меня вопрос к опытным программистам, делаю диалоговое окно с возможностью изменения размера, ну как бы ничего сложного, процедуру корректировки высоты вложенных элементов "накидал" за 30 минут, вроде работает.
Но не пойму как определить поведение если элементы не влазят в контейнер, вариант с overflow = 'hidden'/'scroll'/'auto' не подходит. т.к. некоторые дочерние элементы вложенных могут выходить за пределы контейнера.

Что посоветуете?

вот тестовая страница:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
	width:100px;
	float:left;
	margin:5px;
	border: 2px solid gray;
}
</style>

<script>

function heightTo( n ){

	var containers = document.querySelectorAll('.container');
	for( var i = 0, l = containers.length; i<l; i++ ){
		var 
			container = containers[i],
			children = container.children,
			height = +n;
				
		var percent = 0, // общее количество процентов
			elements=[], // массив элементов с % высотой
			percents=[], // высота в % по индексу
			other = 0; // высота остальных элементов
		
		container.style.height = n+'px';
		
		// ищем элементы с % и остальные подсчеты
		for( var j = 0, m = children.length; j<m; j++ ){
			var element = children[j];
			if( element.hasAttribute('p-height') ){
				p = +element.getAttribute('p-height');
				percent += p;
				elements.push( element );
				percents.push( p )
			}else{
				other += element.offsetHeight;
			}
		}
				
		if( other < height ){ // если элементы будут иметь положительную высоту
			var k = ( height - other )/percent;
			for( var j = 0, m = elements.length; j<m; j++ ){
				var element = elements[j];
				element.style.height = Math.round( percents[j]*k )+'px';
			}
		}else{ // а вот тут не влазит, что делать?
			alert(' ne vlazit !')
		}
	}	
}
</script>
</head>
<body>

	<button onclick="heightTo( 100 )">100</button>
	<button onclick="heightTo( 150 )">150</button>
	<button onclick="heightTo( 200 )">200</button>
	<button onclick="heightTo( 300 )">300</button>
	<button onclick="heightTo( 500 )">500</button>
	
	<br/>
	
	<div class="container">
		<div p-height="30" style="height:auto; background-color:red">block 30%</div>
		<div style="height:30px; background-color:green">block 30px</div>
		<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>	
		<div style="height:40px; background-color: blue">block 40px</div>
	</div>
	
	<div class="container">
		<div p-height="50" style="height:auto; background-color:red">block 50%</div>
		<div style="height:100px; background-color:green">block1 100px</div>
		<div p-height="10" style="height:auto; background-color: yellow">block 10%</div>	
		<div p-height="20" style="height:auto; background-color: blue">block 20%</div>
	</div>	

	<div class="container">
		<div p-height="50" style="height:auto; background-color:red">block 50%</div>
		<div  style="height:100px; background-color:green">block 100px</div>
		<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>	
		<div style="height:40px; background-color: blue">block 40px</div>
	</div>	
	
</body>
</html>