CODEWITHSUNDEEP
htmlreactjsflexboxcontainers
GentleCynic
GentleCynic

Reputation: 83

How to expand a React Component to fill page with flexbox

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%) .

Upvotes: 2

Views: 5719

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

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>

Upvotes: 4

Related Questions