Meteor：Flexbox CSS 在 jsFiddle 中有效，但在应用程序中无效答案

【问题标题】：Meteor: Flexbox CSS works in jsFiddle but not in appMeteor：Flexbox CSS 在 jsFiddle 中有效，但在应用程序中无效
【发布时间】：2016-09-07 12:04:35
【问题描述】：

我有这个 flexbox 自动扩展列 CSS 在 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;
}

但它在我的应用程序上不起作用，尽管它与 CSS 文件的内容完全相同。当然，标记也是一样的，但是使用了 Meteor 的带有 Flow-Layout 的模板系统，它只在顶层添加了一个额外的 <div id="__flow-root">。唯一包含的是 display:block; 并且摆弄它不会改变任何东西（更好）。

还有什么我可以检查的吗？应用程序版本在这里：http://campchat.meteor.com/room/9sCa5QfW6eqZmGQxW 如您所见，它不会像 jsFiddle 那样扩展 #chatlog。什么给了？

【问题讨论】：

标签： html css meteor flexbox

【解决方案1】：

通常情况下，问题的陈述无情地让我得到了答案：罪魁祸首确实是 Flow-Layout 的#__flow-root。我所要做的就是在那里指定100%，一切都运行良好。现在，如果我只明白为什么;）

【讨论】：

它仍然不完美——#chatLog 的高度会影响页眉和页脚的高度； #chatLog 增长得越长，这两个 div 的高度就越短...

【解决方案2】：

在我的例子中，我不得不在 #__blaze-root 上设置 flex 属性（显示、高度和 flex-direction）而不是 #__flow-root，它包含正文中的整个文档。

如果您使用的是 BlazeLayout，您还可以将根更改为主体（或其他任意元素）并将您的 flex 样式应用到它，如下所示：

BlazeLayout.setRoot('body');

【讨论】：