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.

My Website

Cookie Usage

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

My Website Logo