Flexbox rendering issue in template (bug or PEBCAK)?


#1

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: