用于填充可用空间的 Flexbox 在 React.js 组件内不起作用

Question

我正在尝试根据此示例设置一个简单的 Flexbox 布局，其内容在页眉和页脚之间扩展。当我将适当的 HTML 直接放入页面模板中时，它工作正常，但当我在 React 组件中渲染完全相同的 HTML 时，它会失败。

这是纯 HTML：

<div class="box">
  <div class="header">
    <p><b>header</b></p>
  </div>
  <div class="content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

我的style.css在所有情况下都是这样：

html, body {
  height: 100%;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  flex: 0 1 auto;
}

.content {
  flex: 1 1 auto;
}

.footer {
  flex: 0 1 40px;
} 

当作为静态 HTML 时，效果非常好。如果我只提供一个带有单个rootdiv 的空页面，并使用以下 HTML 通过 React 渲染相同的内容，我应该会得到相同的结果：

<div id="root">
</div>

还有这个JS：

class Boxes extends React.Component {

  render() {
    return (
      <div className="box">
        <div className="header">
          <p><b>header</b></p>
        </div>
        <div className="content">
          <p>
            <b>content</b>
            (fills remaining space)
          </p>
        </div>
        <div className="footer">
          <p><b>footer</b> (fixed height)</p>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement(Boxes, null),
  document.getElementById('root')
);

但是当我使用 React 渲染时，中心的“内容”窗格不再填充可用的垂直空间。相反，它只是根据内容调整大小。

这是 Chrome/Mac 上的 React 15.4.2。

Answer 1

问题是你有一个<div id="root">没有任何 css 的包装器。你应该让 root 展开到完整高度，然后里面的 div 也会展开：

#root {
  height: 100%;
}