html - Meteor: Flexbox CSS works in jsFiddle but not in app -

i've got flexbox auto-expanding column css working nicely in jsfiddle: http://jsfiddle.net/disgr4ce/91yfdb4z/1/

.fc {     display: -webkit-flex;     display: flex; }  .fcrow {     -webkit-flex-direction: row;     flex-direction: row;      -webkit-justify-content: space-between;     justify-content: space-between;      -webkit-align-items: center;     align-items: center; }  .fccolumn {     -webkit-flex-direction: column;     flex-direction: column;      height: 100%; }  html, body {     margin:0px;     height: 100%; }  #header {     background-color: #eee;     padding: 10px 10px; }  .clickable {     cursor: pointer; }  #chatlog {     -webkit-flex: 1 1 auto;     flex: 1 1 auto;     overflow-y: auto;     min-height: 0px;      padding:10px; }  #chatfooter {     height: 40px;     padding:10px;     background-color: #eee;      display: -webkit-flex;     display: flex;     -webkit-flex-direction: row;     flex-direction:row; }  .loginput {     padding: 10px 10px; } 

but doesn't work on app, despite being literally exact same contents of css file. markup same well, of course, uses meteor's template system flow-layout, adds 1 additional <div id="__flow-root"> @ top level. thing contains display:block; , fiddling doesn't change (for better).

is there else can check? app version here: http://campchat.meteor.com/room/9sca5qfw6eqzmgqxw can see, not expand #chatlog way jsfiddle 1 does. gives?

as case, statement of question led me inexorably answer: culprit indeed flow-layout's #__flow-root. had specify 100% there, , everything's working nicely. if understood why ;)