height of higher child

dabblet.css

/* height of higher child */

nav{
	font-size:3em;
	position:absolute;
	z-index:2;
}
a{
	text-decoration:none;
	display:inline-block;
	background:#49c;
	padding:10px 40px;
	border-radius:20px;
	color:white;
}
ul{
	width:500px;
	margin:0 auto;
	padding:0;
	list-style:none;
	border:1px solid red;
}
/*ul:after{
	content:'';
	display:block;
	clear:left;
}*/
li{
	display:inline-block;
	opacity:0;
	width:0px;
	vertical-align:top;
	max-height:0vh;
	transition:all 1s;
	margin:0;
	padding:0;
	position:relative;

}
li:target{
	opacity:1;
	
	display:inline-block;
	max-height:100vh;
	z-index:1;
}

div{
	width:500px;
	resize:both;
	background:rgba(0,0,0,.1);
}

p{
	text-align:justify;
}

dabblet.html

<nav><a href="#a1">1</a> <a href="#a2">2</a> <a href="#a3">3</a></nav>

<ul><li id="a1">
		<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tortor leo, elementum vel tempus ac, aliquet at turpis. Mauris consequat mollis odio, vitae condimentum dolor sagittis ut. Sed orci elit, lobortis ac mollis vel, facilisis sed felis. In sed pellentesque metus. Suspendisse vel justo nisl. Curabitur eleifend semper arcu, sit amet congue erat posuere vel. Aliquam erat volutpat. </p></div>
	</li><li id="a2">
		<div><p>Fusce id metus ut tortor cursus scelerisque non et ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque hendrerit commodo est, vel consequat nunc gravida eget. Nam elementum imperdiet erat. Etiam eu mi libero. Morbi vulputate dapibus consectetur. Nulla et tortor posuere urna scelerisque adipiscing eget ut sapien. Morbi id risus nec nisl consectetur pretium consequat nec risus. Donec nec diam elit. Quisque eu sem augue, nec hendrerit libero. Nunc quis dictum ligula. Mauris vitae arcu id mi faucibus imperdiet non non mauris. Integer tellus nisl, euismod non accumsan eget, vestibulum at dolor. Nunc sed eros velit. Cras at semper nulla. Cras sit amet elit vitae eros interdum tristique. </p></div>
	</li><li id="a3">
		<div><p>Curabitur semper sollicitudin semper. Donec feugiat, sapien in rutrum dapibus, dolor lorem elementum enim, non placerat mi nunc sed nisl. Duis feugiat rutrum sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacinia cursus. Suspendisse potenti. Cras rutrum orci at massa blandit pharetra. Fusce dictum est quis ante volutpat ac volutpat arcu suscipit. Donec viverra lacinia ligula, nec accumsan arcu convallis nec. Integer eu urna ipsum. Proin enim elit, hendrerit sit amet sollicitudin at, condimentum ac arcu. Nunc in massa sed enim posuere luctus. Nullam et erat leo. Phasellus in sollicitudin sapien.</p><p>Nulla facilisi. Vestibulum scelerisque lacus sed nisl luctus aliquam. Etiam ultricies massa in purus pellentesque vehicula. Etiam dolor nisi, placerat vel tincidunt ut, tristique sit amet libero. Duis bibendum pulvinar justo, non fringilla diam bibendum quis. Nullam elementum lectus non magna lacinia eu mollis nunc varius. Ut quis libero dapibus est accumsan vehicula. Donec adipiscing suscipit risus ut ornare. Nam quis condimentum tellus. Donec in purus eu nisl feugiat rutrum. Ut elementum, eros quis dapibus ornare, massa magna venenatis neque, at fermentum mauris ipsum eget metus. Integer ullamcorper, nisi nec accumsan aliquet, diam elit ultricies elit, vitae vestibulum purus ipsum quis tellus.</p><p>Etiam ut eros nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
</li></ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}