Need help understanding div classes and css-CodePudding

I am using react JS to build a simple website.

Currently, this is what the website looks like:

Here, the side-bar and the dashboard content are under separate divs with classNames dashboard-content and dashboard-sidebar. Both of these divs are under a parent div called div-container. This is the code for it.

<div className="dashboard-container">
        <div className="dashboard-sidebar"> 
            <Sidebar />
        </div>

        <div className="dashboard-content"> 
            <h1> dashboard content </h1>
            <p> current temperature : {current_data} </p>
            <Button
            onClick = {Increment} > 
          Increment
            </Button>
        </div>
        
    </div>

I want the side-bar and the content to be children of the container, that way I can use display:flex or something else so that the side bar and the content are automatically placed in the correct order (side-bar on the left, content on the right). But now they are overlapping. This is the CSS code

.dashboard-container {
  position: fixed;
  display: flex;
 
}

.dashboard-container .dashboard-content {
  position: fixed;
  background-color: #dacde7;

}
.dashboard-container .dashboard-sidebar {
  position: fixed;
  background-color: #dacde7;

}

^ in the above CSS, it doesn't matter what I do to dashboard-container, it just doesn't take place in the page, where as other elements work fine.

A quick solution was to do this:

.dashboard-container .dashboard-content {
  position: fixed;
  background-color: #dacde7;
  left: 400px;
}

And it worked and resulted this layout:

However, I do not like having to hard code the left position in pixels manually every time.

What am I doing wrong? Why does changes in .dashboard-container not taking place and not affecting its children?

CodePudding user response：

I recommend using the "reactstrap" library, it's really easy to use. you can make this layout with Row, Col, Nav, etc. this link can help you

CodePudding user response：

your question has long response thus please glance these links and learn layout concept of css.