How to expand a React Component to fill page with flexbox

Question

I am currently trying to create a sidebar. The problem I have is that the container for the element "shrinks to it's content".

I have looked at alternate solutions like flex-grow, setting App.css html,body height to 100%, etc.. but nothing seems to work!

In App.js, the App class renders the following:

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

And in 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

The Question: How do I expand the DashBorder element so that it fits the entirety of the page (with a width of 10%) .

BugsArePeopleToo · Accepted Answer · 2019-09-20 22:37:36Z

The trick to wrangling flexbox is maintaining the model of flex container and flex items. When you apply display: flex; to an element it becomes the flex container, and the immediate child elements become the flex items.

The flex property is used to configure the flex items and is shorthand for <flex-grow> <flex-shrink> <flex-basis>. So this rule...

flex: 1 0 10%;

...is telling that element to grow (flex-grow: 1;), not to shrink (flex-shrink: 0;), and to start out at 10% width (flex-basis: 10%;). The flex-basis is defining width when the flex container is flowing in flex-direction: row which is the default. If flex-direction: column then the basis will represent starting height, but that is for a different layout.

The resource that cemented my understanding, which I highly recommend bookmarking as it is constantly updated to reflect the latest flexbox spec: 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>

Collectives™ on Stack Overflow

How to expand a React Component to fill page with flexbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related