I’m a trying to use flexbox’s margin-top:auto; to render a div at the bottom of its flexbox container within a template. The code works fine when I test it in HTML, but the same code in a Blaze template does not work (comparison screenshots below). I’ve tried everything I can think of, so am I missing something obvious or is there a bug in the template rendering? Thanks in advance for any help or advice you can offer.
Here’s the markup and CSS:
<template name="Chat">
<div class="flex">
<div id="header">
header
</div>
<div class="flex-row">
<div id="names">
names
</div>
<div id="messages">
first message<br/>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</template>
html,
body {
height: 100%;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
height: 100%;
}
.flex-row {
display: flex;
}
#header,
#names,
#messages,
#footer {
border: 0.1em solid #000;
padding: 0.5em;
}
#names {
flex: 1 0 0;
}
#messages {
overflow-y: auto;
flex: 5 0 0;
}
#footer {
margin-top: auto;
}
Here’s how it looks rendered directly from HTML;
And here it is with Meteor rendering:
