Flexbox row not displaying div's side by side-CodePudding

My Flexbox is not displaying two divs as columns but one underneth the other. Not sure why as I have display: flex and flex-direction: row.

App.js file:

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div className="innerBox">
        <div className="innerBoxContent">
          <div className="menu">
            <h1>Menu</h1>
          </div>
          <div className="content">
            <h1>content</h1>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

CSS file:

.App {
  background-color: rgb(24, 24, 35);
  height: 100vh;
  width: 100vw;
  display: flex;
}

.innerBox{
  width: 600px;
  height: 600px;
  background-color: red;
  margin: auto;

  display: flex; 
  flex-direction: row;
}

.menu{
  background-color: blue;
  height: 600px;
  width: 300px;
}

.content
{
  background-color: orange;
  height: 600px;
  width: 300px;
}

Picture:

Can someone explain why its not working as intended. Thank you.

CodePudding user response：

"" Should be removed as the flex-box is being applied to it and not its contents

Fix for HTML file should look like this

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div className="innerBox">       
          <div className="menu">
            <h1>Menu</h1>
          </div>
          <div className="content">
            <h1>content</h1>
          </div>
        
      </div>
    </div>
  );
}

export default App;

CodePudding user response：

.App {
  background-color: rgb(24, 24, 35);
  height: 100vh;
  width: 100vw;
  display: flex;
}

.innerBox{
  width: 600px;
  height: 300px;
  background-color: red;
  margin: auto;

  display: flex; 
  flex-direction: row;
}

.menu{
  background-color: blue;
  height: 60px;
  width: 300px;
    text-align: center;

}

.content
{
  background-color: orange;
  height: 60px;
    text-align: center;
  width: 300px;
}


/* add This Class*/
.innerBoxContent{
    display:flex;
    aling-item:center;
    justify-content:center;
    
}




import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div className="innerBox">
        <div className="innerBoxContent">
          <div className="menu">
            <h1>Menu</h1>
          </div>
          <div className="content">
            <h1>content</h1>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

CodePudding user response：

CSS property flex-wrap: nowrap; should be added to container with class name .innerBox.

.innerBox{
  width: 600px;
  height: 600px;
  background-color: red;
  margin: auto;

  display: flex; 
  flex-direction: row;
  flex-wrap: nowrap;
}

CodePudding user response：

You have menu and content components are inside of .innerContent block. So .innerBoxContent should be flex.

.innerBoxContent {
   display: flex;
   flex-direction: row;
}