Реагировать Bootstrap столбец не заполняет всю ширину

Question

Я использую React и React Bootstrap 4.0. Я хочу, чтобы боковая панель размером 300 пикселей на левой стороне экрана была разборной, а остальная часть экрана находилась там, где отображается содержимое.

Родительским компонентом для боковой панели и содержимого является следующее:

import React from "react";
import './Home.scss';
import {Col, Container, Row} from "react-bootstrap";
import Sidebar from "./Sidebar/Sidebar";

const Home = () => {
    return (
        <Container fluid className={"no-gutters mx-0 px-0"}>
            <Row xs={2} md={2} lg={2} xl={2} noGutters={true} className={""}>
                <Col lg={"auto"} xl={"auto"} className={""}>
                    <Sidebar/>
                </Col>

                <Col className={""}>
                    <div className={"nav-bar"}/>
                </Col>
            </Row>
        </Container>
    )
}

export default Home;

.nav-bar {
  width: 100%;
  height: 100px;
  outline: 1px solid blue;
}

.col {
  outline: 1px solid green;
}

Компонент боковой панели - это просто div с шириной 300px и высотой 100vh. Моя проблема в том, что второй столбец (где будет отображаться контент), кажется, занимает всего 50% экрана, оставляя пробел справа от него. Я хочу, чтобы он занимал все оставшееся пространство, как указано в документации Bootstrap.

Может кто-нибудь определить, где я ошибся?

Answer 1

Проблема в реквизите на Row. Это должно выглядеть так ...

<Container fluid className={"no-gutters mx-0 px-0"}>
    <Row noGutters={true}>
        <Col sm={"auto"}>
            <Sidebar/>
        </Col>
        <Col className={"border"}>
            <div className={"nav-bar"}/>
        </Col>
    </Row>
</Container>

Демо: https://codeply.com/p/IdzE9Wtvt4