如何扩展 React 组件以使用 flexbox 填充页面答案

【问题标题】：How to expand a React Component to fill page with flexbox如何扩展 React 组件以使用 flexbox 填充页面
【发布时间】：2020-01-21 21:58:38
【问题描述】：

我目前正在尝试创建一个侧边栏。我遇到的问题是元素的容器“缩小到它的内容”。

我查看了替代解决方案，例如 flex-grow、将 App.css html、body height 设置为 100% 等。但似乎没有任何效果！

在 App.js 中，App 类呈现以下内容：

      return (
        <Router>
            <Navbar />
            <Route path="/" exact component={Landing} />
            <Route path="/dashboard" component={DashBar} />
        </Router>
     );

在 DashBar 中：

import React from 'react';
import styled from 'styled-components';

const Container = styled.div `
    display: flex;
    border: solid black 3px;
    flex: 1;
`

const DashBorder = styled.div `
    width: 10%;
    border-right: 2px shadow solid black;
    background-color: blue;
 `

 const OtherContent = styled.div `
    width: 90%;
    background-color: red;
`

class DashBar extends React.Component {

    render() {
        return (
            <Container>
                <DashBorder>Dash</DashBorder>
                <OtherContent>Other</OtherContent>
            </Container>
        );
    }
}

export default DashBar

问题：如何扩展 DashBorder 元素以使其适合整个页面（宽度为 10%）。

【问题讨论】：

标签： html reactjs flexbox containers

【解决方案1】：

解决 flexbox 的技巧是维护 flex 容器和 flex 项的模型。当你将display: flex; 应用到一个元素时，它就变成了弹性容器，而直接的子元素变成了弹性项目。

flex 属性用于配置弹性项目，是<flex-grow> <flex-shrink> <flex-basis> 的简写。所以这条规则...

flex: 1 0 10%;

...告诉该元素增长（flex-grow: 1;），而不是缩小（flex-shrink: 0;），并以 10% 的宽度开始（flex-basis: 10%;）。当弹性容器流入flex-direction: row 时，flex-basis 定义宽度，这是默认值。如果flex-direction: column，那么基础将代表起始高度，但这是针对不同的布局。

巩固我理解的资源，我强烈建议将其加入书签，因为它会不断更新以反映最新的 flexbox 规范：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* { box-sizing: border-box; }
body { margin: 0; }

.container {
  display: flex;
  height: 100vh;
  border: 3px solid green;
}

.dashbar {
  flex: 1 0 10%;
  background: dodgerblue;
}

.other-content {
  flex: 1 0 90%;
  background: papayawhip;
}

<div class="container">
  <div class="dashbar">Dash</div>
  <div class="other-content">Other</div>
</div>

【讨论】：