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!

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;
			<p>Some Content</p><p>More Content</p>

With every Browser that supports CSS3.

My Website

Cookie Usage

This website uses Cookies to help you use the website faster.

My Website Logo