Dropdown menu height auto workaround

Dropdown menu animation to workaround the "height: auto" not taken into account in css transitions.

HTML

<body>
	<input type="checkbox" id="menuOpen"></input>
	<label id="bouton" for="menuOpen"><span>Click on me !</span>
        <div id="menu">
            <div id="masque">
				<div class="choix" id="choix1">Choix 1</div>
				<div class="choix" id="choix2">Choix 2</div>
				<div class="choix" id="choix3">Choix 3 tr&egrave;s tr&egrave;s long pour voir la taille finale du menu</div>
				<div class="choix" id="choix4">Choix 4</div>
				<div class="choix" id="choix5">Choix 5</div>
				<div class="choix" id="choix6">Choix 6</div>
			</div>
		</div>
    </label>
</body>

CSS

body {
	font-family: sans-serif;
}
#menuOpen {
	display: none;
}
#bouton {
	position: absolute;
	left: 100px;
	top: 100px;
	width: 200px;
	height: 30px;
	background-color: lightgray;
	cursor: pointer;
}
#bouton > span {
	color: black;
	padding: 6px;
	line-height: 30px;
}
#menu {
	position: absolute;
	top: 100%;
	overflow: hidden;
	min-width: 100%;
	transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
	transform: translateY(-100%);
	visibility: hidden;
	color: white;
}
#menuOpen:checked + #bouton > #menu  {
	transform: translateY(0%);
	visibility: visible;
	transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
	transform: translateY(0%);
}
#masque {
	position: relative;
	background-color: gray;
	transform: translateY(100%);
	transition: transform 0.3s linear 0s;
}
.choix {
	white-space: nowrap;
	padding: 3px 6px;
}
.choix:hover {
	background-color: darkgray;	
}