Flexbox行不显示DIV

Question

我的Flexbox不是将两个Divs显示为列，而是在另一列下方显示。不确定为什么我有显示：flex和flex方向：行。

app.js文件：

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文件：

.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;
}

图片：

有人可以解释为什么它不按预期工作。谢谢。

Answer 1

“”
应在将flex-box应用于它时删除，而不是其内容

修复的HTML文件应该看起来像这样

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;

Answer 2

.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;

Answer 3

CSS属性Flex-wrap：Nowrap;应添加到具有类名称.innerbox的容器中。

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

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

Answer 4

您拥有菜单和content组件在内部。InnerContent block。
因此，.innerboxContent应该是flex。

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