When using basic HTML with flexbox, it is possible to create a layout with a header, footer, and content area that fills the space in between:
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row">Footer</div>
</body>
</html>
The header appears at the top, and the footer at the very bottom.
+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++
However, when attempting to achieve the same layout within Aurelia (using the webpack starter kit), the grow property seems to be ignored on both the body and the content elements.
index.ejs -- included in the starter kit I made some styling additions:
<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">
app.html -- changes made to the original starter kit file:
<template>
<div style="display:flex;flex-direction:row;">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row;">Footer</div>
</template>
I also attempted adding flex to
<template style="display:flex;flex-direction:column;flex-grow:1">Although everything looks correct when inspecting the page — almost identical to the basic HTML example — the body and the div containing the Content Area do not expand to fill the height of the page.
Trying to create an example in Plnkr revealed the same issue as observed in Aurelia. I noticed that Plnkr utilizes shadow elements just like Aurelia does — this may be related to the problem?