История изменений
Исправление ddidwyll, (текущая версия) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>no frame</title>
<style>
header, main, aside, article, section { border: 2px dotted red; margin: 1em }
html, body { height: 100% }
</style>
</head>
<body style="display:flex;flex-direction:column;text-align:center">
<header style="background-color:#ADD8E6;flex-basis:20%">
<img src="1" />
<p>h20%</p>
</header>
<main style="display:flex;flex-basis:80%">
<aside style="flex-basis:20%">
<img src="2" />
<p>w20%</p>
</aside>
<article style="display:flex;flex-basis:80%">
<section style="flex-basis:50%">
<img src="3" />
<p>w50%</p>
</section>
<section style="flex-basis:50%">
<img src="4" />
<p>w50%</p>
</section>
</article>
</main>
</body>
</html>
Исходная версия ddidwyll, :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>frame</title>
<style>
header, main, aside, article, section { border: 2px dotted red; margin: 1em }
html, body { height: 100% }
</style>
</head>
<body style="display:flex;flex-direction:column;text-align:center">
<header style="background-color:#ADD8E6;flex-basis:20%">
<img src="1" />
<p>h20%</p>
</header>
<main style="display:flex;flex-basis:80%">
<aside style="flex-basis:20%">
<img src="2" />
<p>w20%</p>
</aside>
<article style="display:flex;flex-basis:80%">
<section style="flex-basis:50%">
<img src="3" />
<p>w50%</p>
</section>
<section style="flex-basis:50%">
<img src="4" />
<p>w50%</p>
</section>
</article>
</main>
</body>
</html>