<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Narrow regions test</title>
		<style>
header, nav, main, aside, footer {
	border: 2px solid black;
	margin-bottom: 0.5em;
	padding: 0.5em;
}

.container {
	display: flex;
}

.page {
	flex-direction: column;
	height: 95vh;
}

.content {
	flex-grow: 1;
}

nav {
	width: 4vw;
}

main {
	flex-grow: 1;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

aside {
	width: 4vw;
}
		</style>
	</head>
	<body class="container page">
		<header>
			<h1>Narrow regions test</h1>
		</header>
		<div class="container content">
			<nav aria-label="Really long-winded name">
				nav
			</nav>
			<main>
				main
			</main>
			<aside aria-label="Another overly verbose handle">
				aside
			</aside>
		</div>
		<footer>
			footer
		</footer>
	</body>
</html>

Add manual test page for narrow regions
Add manual test page for narrow regions
