Two column (one fixed, one scrolls) using React/React Flexbox Grid

Question

I am after the following functionality:

• Navigation column (left) stays locked and occupies 100vh, or 100% of the browser's current height,
• Content column (right) scrolls, showing content.

Right now, the following code works well, when the browser is sized-down the Navigation column stacks on top of the Content column.

However, I'd like to keep this functionality while forcing the Navigation column to be fixed.

So far I've tried using position: fixed; under .nav-column in App.css, this resulted in the Navigation overlapping the Content.

I'm using React 16.7.0 and 'react-flexbox-grid'. Checked this out as well, this solution just involved using basic HTML/CSS and has nothing to do with React nor React Flexbox Grid.

Any help? Here's the code:

(Sorry, I can't get the snippet to run. Guessing it's the react-flexbox-grid stuff.)

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid';
import './App.css';

class App extends Component {
  render() {
    return (
      <Grid fluid className='app-main'>

        <Row>
          <Col className='nav-column' xs={12} sm={3}>
            <h1>Nav</h1>
          </Col>

          <Col className='content-column' xs >
            <h1>Content</h1>
            <div>
            <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
            </div>
          </Col>
        </Row>

      </Grid>
    );
  }
}

export default App;

.app-main {
  font-family: Helvetica;
}

.nav-column {
  font-family: Helvetica;
  font-size: 18px;
  background-color: aqua;
}

.content-column {
  font-size: 18px;
  background-color: darkkhaki;
}

Answer 1

I took some liberty with your design thinking this is what you are after from your description. The biggest changes are removing the <Row> since that complicates scrolling only one column and solved the rest with CSS.

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";
import "./styles.css";

function App() {
  return (
    <Grid fluid className="app-main">
      <Col className="nav-column" xs={12} sm={3}>
        <h1>Nav</h1>
      </Col>

      <Col className="content-column" xs>
        <h1>Content</h1>
        <div>
          <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum."
          </p>
        </div>
      </Col>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSS

.app-main {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.nav-column {
  font-family: Helvetica;
  font-size: 18px;
  background-color: aqua;
  overflow: hidden;
}

.content-column {
  font-size: 18px;
  background-color: darkkhaki;
  overflow: scroll;
}

The app is written as a function to make using the live editor easier. So here it is in the live editor.

https://codesandbox.io/s/n4n779pj4m