Flexbox 填充可用空间在 React.js 组件中不起作用答案

【问题标题】：Flexbox to fill available space not working inside React.js componentFlexbox 填充可用空间在 React.js 组件中不起作用
【发布时间】：2017-11-12 02:01:45
【问题描述】：

我正在尝试设置一个简单的 flexbox 布局，其内容在页眉和页脚之间展开，基于 this example。当我将适当的 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 时，效果很好。如果我只提供一个带有单个 root div 的空页面并使用这个 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。

【问题讨论】：

我测试了你的代码，这不符合你的预期吗？ codesandbox.io/s/wmRnm5Y31
按预期坏了。内容应填满所有剩余的垂直空间。
啊，找到了！需要在外部根元素上将高度设置为 100%。在这种情况下 index.html 应该是<div id="root" style="height: 100%;"></div>
是的，就是这样，#root 样式丢失，更新示例：codesandbox.io/s/wmRnm5Y31

标签： reactjs flexbox

【解决方案1】：

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

#root {
  height: 100%;
}

【讨论】：

是的，这就是问题所在！
那么如果flexbox嵌套很深，是否所有的父div也需要100%的高度？这可能很难实现。
如果需要，您可以随时使用'height: 100vh'
是的，但是如果尝试填充另一个 div 内的垂直空间（例如导航栏下方），vh 将不起作用。
是的，没有什么好方法可以做到这一点.. 有一些技巧，如100vh 或calc(100vh - 50px) 删除顶栏高度.. 或过度使用display: flex.. 我倾向于使用@的组合987654326@和height/min-height: 100%

【解决方案2】：

你可以试试：{ height : 100vh}

【讨论】：