Есть ребёнок и родитель, у ребёнка размеры 1610x900, у родителя высота примерно 300px. Добавил ребёнка в родителя, transform:scale(0.345), и высота родителя осталось 1147.97px. Те, как до трансформации. Из-за этого отодвигает ниже лежащий блок. max-height не вариант, нужно что-бы блоки прилегали вплотную, а если высота у телефона, например, меньше чем max-height нижний блок уходит в никуда.
Пример:
.child
{
width:600px;
height:600px;
background-color:blue;
}
.parent
{
width:100%;
background-color:green;
}
.row
{
width:100%;
height:200px;
background-color:purple;
}
<div class="parent">
<div class="child" style="transform:scale(0.345);"></div>
</div>
<div class="row"></div>
Видно, как зелёный блок продолжает идти вниз, хотя синий блок стал меньше после scale().
Есть предположения как фиксить?