Чтобы реализовать желаемую функциональность, вам потребуется изменить некоторые стили для блока с id `scaleble`, чтобы он занимал всю доступную ширину и высоту родительского элемента, а также чтобы соседние блоки правильно прижимались к нему.
Вот несколько шагов, которые могут помочь вам добиться этого:
1. **Установите размеры на 100%**: Установите ширину и высоту для блока `scaleble` в 100%. Это позволит ему занимать все доступное пространство внутри родительского элемента.
2. **Используйте `box-sizing: border-box`**: Убедитесь, что используете `box-sizing: border-box`, чтобы отступы и границы не влияли на общий размер элемента.
3. **Настройка Flexbox**: Если это возможно, используйте Flexbox для родительского элемента, чтобы аккуратно организовать расположение дочерних элементов.
Вот пример CSS, который можно применить к вашему случаю:
```css
#parentDiv {
display: flex; /* Используйте flexbox для родительского элемента */
flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку при недостатке места */
}
#scaleble {
flex: 1 1 auto; /* Позволяет блоку масштабироваться и занимать доступное пространство */
min-width: 200px; /* Минимальная ширина, если нужно */
min-height: 100px; /* Минимальная высота, если нужно */
box-sizing: border-box; /* Учитывает границы и отступы в размеры */
background-color: lightblue; /* Для визуализации */
}
.dinamicSize, .dinamicSize-2 {
min-width: 100px; /* Минимальная ширина для других элементов */
min-height: 100px; /* Минимальная высота */
}
```
### Примечания:
- Убедитесь, что HTML-структура соответствует тому, что указано в CSS.
- Для того чтобы `scaleble` не превышал размеры родителя, можно добавить `max-width` и `max-height`, если это необходимо.
- Не забудьте протестировать поведение блоков на различных размерах экрана, чтобы убедиться, что они адаптивны.
С этими изменениями `#scaleble` будет корректно масштабироваться и не будет превышать границы родительского элемента на всех устройствах.