Dynamic Menubar Height with Flexbox

_dynamic-navbar-height.md

#Dynamic Menubar Height with flexbox

index.html

<header class="site-header">
	<a class="branding" href="#"><h1>Just Testing</h1></a>
	<nav class="main-navigation">
		<ul class="menu">
			<li class="menu-item"><a href="#">Home</a></li>
			<li class="menu-item menu-item-has-children"><a href="#">Blog</a>
				<ul class="sub-menu">
					<li class="menu-item"><a href="#">Portfolio</a></li>			
					<li class="menu-item"><a href="#">Contact</a></li>
				</ul>
			</li>
			<li class="menu-item"><a href="#">Portfolio</a></li>
			<li class="menu-item"><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>

settings.json

{"view":"split","fontsize":"90","seethrough":"1","prefixfree":"1","page":"css"}

style.css

*{
	margin: 0;
	padding: 0;
	font-family: Lato
}
a{
	color: #333;
	text-decoration: none;
}
.site-header{
	background: #bada55;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}
.branding{
	display: flex;
	align-items: center;
}
.branding h1{
	font-size: 18px;
	padding: 10px 20px
}
.main-navigation{
	display: flex;
}
.menu{
	list-style: none;
	display: flex;
}
.menu-item{
	display: flex;	
	position: relative;
}
.menu-item a{
	background-color: red;
	display: flex;
	align-items: center;
	padding: 20px;
}
.sub-menu{
	position: absolute;
	top: 100%;
	left: 0;
}