Unknown Height Transition
The parent height will stay as if the child has full height!
In a CSS transition you can't use height: auto; to animate the element to full height. Therefore you can use this trick, to get the desired effect.
You have to use exactly height: 0%; on the child element for this to work!
<style>
body {
display: flex;
flex-direction: row;
}
div {
display: flex;
flex-direction: column;
}
span {
height: 0%;
transition: flex-grow 2s;
background: red;
border: solid 1em;
overflow: hidden;
}
span:hover {
flex-grow: 1;
}
</style>
<body>
<div>
<span>
<p>Some Content</p><p>More Content</p>
</span>
</div>
</body>With every Browser that supports CSS3.
