Два столбца (один фиксированный, один прокручивается) с использованием React / React Flexbox Grid

Question

У меня следующие функции:

• Столбец навигации (слева) остается заблокированным и занимает 100vh, или 100% от текущей высоты браузера,
• Столбец содержимого (справа) прокручивает, показывая контент.

Прямо сейчас, следующий код работает хорошо, когда браузер уменьшен, столбец Навигации накладывается на верхнюю часть столбца контента.

ОднакоЯ хотел бы сохранить эту функциональность при исправлении столбца навигации.

До сих пор я пытался использовать position: fixed; в .nav-column в App.css, в результате чего навигация перекрывалась.Контент.

Я использую React 16.7.0 и'act-flexbox-grid '.Также отметили этот , это решение просто включало использование базового HTML / CSS и не имеет ничего общего ни с React, ни с React Flexbox Grid.

Любая помощь?Вот код:

(Извините, я не могу запустить фрагмент. Догадаюсь, что это react-flexbox-grid.)

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

Я немного позаботился о вашем дизайне, думая, что это то, что вам нужно из вашего описания.Самые большие изменения удаляют <Row>, поскольку это усложняет прокрутку только одного столбца и решает остальные с помощью 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;
}

Приложение написано как функция длясделать использование живого редактора проще.Так что вот в живом редакторе.

https://codesandbox.io/s/n4n779pj4m