Q:

scale div and adapt his parent size

I've this code : https://jsfiddle.net/56pghvt6/
I want my parent height adapt to his visible content but when I apply a transform: scaleY(0) to the child div. Actually parent height don't change.
precision : I use ScaleY to animate a mouse hover, so display: none are not a solution
Any idea to solve the problem ?

A:

As transform doesn't affect the elements original position or size, you could also animate for example the max-height.

.parent{
  border: 1px solid red
}
.children{
  transition: transform .3s ease-in-out, max-height 0.3s ease-in-out;
  transform-origin: 0 0;
  max-height: 300px;
}
.parent:hover .children{
  transform: scaleY(0);
  max-height: 0;
}
<div class="parent">
  <div class="intro">
    <p>Hover me</p>
  </div>
  <div class="children">
    <p>text line 1</p>
    <p>text line 2</p>
    <p>text line 3</p>
  </div>
</div>

