[LADYX]

рони,

Пожалуйста, отформатируйте свой код!

Да, отформатировал.

не судьба сделать так

В смысле не судьба?))

Рони, смотрите, в вашем ответе дочерний блок (зеленый квадрат) не сохраняет свои пропорции, когда мы меняем размеры родительского блока.

В моем ответе пропорции квадрата сохраняются, что и должно быть. Но получается так, что квадрат "выпрыгивает" из своего родителя при изменении размеров родителя. Вот как этого избежать?

Или хорошо, если сделать по-другому? Например, дочернему блоку (зеленому квадрату) указать не жесткие размеры (в px), а указать проценты: и ширину, и высоту 100%. Вот пример:

<style>
#parent {width: 300px; height: 300px; padding: 10px; border: 5px solid red;}
#children {width: 100%; height: 100%; background: green;}
</style>

<p>height: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()">

width: <input id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w" oninput="parentW()"></p>

<div id="parent"><div id="children"></div></div>

<script>
parent = document.getElementById('parent');
 children = document.getElementById('children');
function parentH() {
 parent_range = document.getElementById('parent_range_H');
 parent.style.height = parent_range.value+'px';
}
function parentW() {
 parent_range = document.getElementById('parent_range_W');
 parent.style.width = parent_range.value+'px';
}
</script>

Если так, то как сделать, чтобы при любых изменениях размеров ширины или высоты родительского элемента, дочерний элемент (зеленый квадрат) не менял свои пропорции, то есть всегда оставался квадратом, при этом в пределах своего родительского элемента?

Вот эту задачу мне и нужно решить, но я понять не могу, как это сделать. Вот и прошу помощи.