The problem is that when using the transform property, the parent element ignores the increase in the size of the child element.

Example 1: Child container using width and height

 .main { display: inline-flex; background: green; padding: 10px; } .element { display: block; background: red; width: 100px; height: 100px; } 
 <div class="main"> <div class="element"></div> </div>

Example 2: Child container using transform

 .main { display: inline-flex; background: green; padding: 10px; } .element { display: block; background: red; width: 100px; height: 100px; transform: scale(1, 2); } 
 <div class="main"> <div class="element"></div> </div>

How to make transform take into account the parent container?

    2 answers 2

    The problem is that during the transformation the element does not increase - only its visual change occurs. If we use js to request the dimensions of the transformed element, it turns out that they remain unchanged:

     let elem = document.getElementsByClassName('element')[0]; let styles = getComputedStyle(elem); console.log('ширина: '+styles.width); console.log('высота: '+styles.height); 
     .main { display: inline-flex; background: green; padding: 10px; margin: 50px; } .element { display: block; background: red; width: 100px; height: 100px; transform: scale(1, 2); } 
     <div class="main"> <div class="element"></div> </div>

    Therefore, if it is necessary for the parent to react to a change in the child, either the dimensions themselves must be changed, or the parent must also be transformed simultaneously with the “daughter”.

    • Yes, I myself noticed that the transform property does not affect the DOM. However, if through the debug console in the mode of selecting an element, you hover on a transformed block, then the height will be 200px. Is there a way to catch this height / width (besides writing special js code that will look at the transform property)? - MaximPro 1:34 pm
    • @MaximPro, yes no - in debug mode the height is also 100px: i.stack.imgur.com/lhaeB.jpg - humster_spb pm

    The following is written to the CSS Transforms Module Level 1 specification:

    The Transformer Element

    For elements whose layout is governed by the boxed CSS model, the transformation property does not affect the flow of the surrounding content of the transformed element.

    PS In order to stretch the parent container, you will have to use the js tools.