GeoffreyDijkstra/ie11-working-flexbox-layout.html

## ie11-working-flexbox-layout.html
<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Test</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }

        html {
            height: 100vh;
        }

        body {
            min-height: 100vh;
            display: flex;
        }

        .flex-wrapper {
            flex-basis: auto;
            flex-shrink: 0;
            flex-grow: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            width: 100%;
        }

        header, main, footer {
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }

        header {
            background-color: red;
        }

        main {
            background-color: #d3d3d3;
            flex-grow: 1;
        }

        footer {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-wrapper">
        <header>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dignissim semper. Ut quis libero facilisis, tincidunt leo eu, iaculis mauris. Aliquam turpis risus, interdum nec sem ut, malesuada mollis ipsum. Aenean accumsan orci sit amet faucibus vehicula. Vestibulum sed nibh consequat, tempor lectus blandit, luctus est. Quisque eleifend tortor leo, vulputate fermentum ligula suscipit ut. Sed quis ex eget felis sodales scelerisque vitae vitae nunc. Cras orci mauris, tempus ac viverra at, lacinia et turpis. Sed faucibus est ex, sed maximus augue facilisis ut. Pellentesque ut lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat blandit metus sit amet tempor. Mauris a viverra felis, non rhoncus sapien. Phasellus bibendum metus diam, pulvinar convallis nisl tincidunt non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dignissim semper. Ut quis libero facilisis, tincidunt leo eu, iaculis mauris. Aliquam turpis risus, interdum nec sem ut, malesuada mollis ipsum. Aenean accumsan orci sit amet faucibus vehicula. Vestibulum sed nibh consequat, tempor lectus blandit, luctus est. Quisque eleifend tortor leo, vulputate fermentum ligula suscipit ut. Sed quis ex eget felis sodales scelerisque vitae vitae nunc. Cras orci mauris, tempus ac viverra at, lacinia et turpis. Sed faucibus est ex, sed maximus augue facilisis ut. Pellentesque ut lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat blandit metus sit amet tempor. Mauris a viverra felis, non rhoncus sapien. Phasellus bibendum metus diam, pulvinar convallis nisl tincidunt non.
        </header>
        <main></main>
        <footer>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dignissim semper. Ut quis libero facilisis, tincidunt leo eu, iaculis mauris. Aliquam turpis risus, interdum nec sem ut, malesuada mollis ipsum. Aenean accumsan orci sit amet faucibus vehicula. Vestibulum sed nibh consequat, tempor lectus blandit, luctus est. Quisque eleifend tortor leo, vulputate fermentum ligula suscipit ut. Sed quis ex eget felis sodales scelerisque vitae vitae nunc. Cras orci mauris, tempus ac viverra at, lacinia et turpis. Sed faucibus est ex, sed maximus augue facilisis ut. Pellentesque ut lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat blandit metus sit amet tempor. Mauris a viverra felis, non rhoncus sapien. Phasellus bibendum metus diam, pulvinar convallis nisl tincidunt non.
        </footer>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="nl">
	<head>
	<title>Test</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}

	html {
	height: 100vh;
	}

	body {
	min-height: 100vh;
	display: flex;
	}

	.flex-wrapper {
	flex-basis: auto;
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	width: 100%;
	}

	header, main, footer {
	flex-basis: auto;
	flex-grow: 0;
	flex-shrink: 0;
	}

	header {
	background-color: red;
	}

	main {
	background-color: #d3d3d3;
	flex-grow: 1;
	}

	footer {
	background-color: blue;
	}
	</style>
	</head>
	<body>
	<div class="flex-wrapper">
	<header>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dignissim semper. Ut quis libero facilisis, tincidunt leo eu, iaculis mauris. Aliquam turpis risus, interdum nec sem ut, malesuada mollis ipsum. Aenean accumsan orci sit amet faucibus vehicula. Vestibulum sed nibh consequat, tempor lectus blandit, luctus est. Quisque eleifend tortor leo, vulputate fermentum ligula suscipit ut. Sed quis ex eget felis sodales scelerisque vitae vitae nunc. Cras orci mauris, tempus ac viverra at, lacinia et turpis. Sed faucibus est ex, sed maximus augue facilisis ut. Pellentesque ut lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat blandit metus sit amet tempor. Mauris a viverra felis, non rhoncus sapien. Phasellus bibendum metus diam, pulvinar convallis nisl tincidunt non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dignissim semper. Ut quis libero facilisis, tincidunt leo eu, iaculis mauris. Aliquam turpis risus, interdum nec sem ut, malesuada mollis ipsum. Aenean accumsan orci sit amet faucibus vehicula. Vestibulum sed nibh consequat, tempor lectus blandit, luctus est. Quisque eleifend tortor leo, vulputate fermentum ligula suscipit ut. Sed quis ex eget felis sodales scelerisque vitae vitae nunc. Cras orci mauris, tempus ac viverra at, lacinia et turpis. Sed faucibus est ex, sed maximus augue facilisis ut. Pellentesque ut lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat blandit metus sit amet tempor. Mauris a viverra felis, non rhoncus sapien. Phasellus bibendum metus diam, pulvinar convallis nisl tincidunt non.
	</header>
	<main></main>
	<footer>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dignissim semper. Ut quis libero facilisis, tincidunt leo eu, iaculis mauris. Aliquam turpis risus, interdum nec sem ut, malesuada mollis ipsum. Aenean accumsan orci sit amet faucibus vehicula. Vestibulum sed nibh consequat, tempor lectus blandit, luctus est. Quisque eleifend tortor leo, vulputate fermentum ligula suscipit ut. Sed quis ex eget felis sodales scelerisque vitae vitae nunc. Cras orci mauris, tempus ac viverra at, lacinia et turpis. Sed faucibus est ex, sed maximus augue facilisis ut. Pellentesque ut lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat blandit metus sit amet tempor. Mauris a viverra felis, non rhoncus sapien. Phasellus bibendum metus diam, pulvinar convallis nisl tincidunt non.
	</footer>
	</div>
	</body>
	</html>