Why Is my "flex-wrap" property not working?-CodePudding

Why is my flex-wrap property not working? Have I made any mistakes in the code?

.container {
  border: solid black 2px;
  height: 600px;
  width: 650px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div >
  <div  id="box-1">First Box</div>
  <div  id="box-2">Second Box</div>
  <div  id="box-3">Third Box</div>
  <div  id="box-4">Fourth Box</div>
  <div  id="box-5">Fifth Box</div>
</div>

CodePudding user response：

Try this,

.container {
  border: solid black 2px;
  height: 100px;
  width: 100px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div >
  <div  id="box-1">First Box</div>
  <div  id="box-2">Second Box</div>
  <div  id="box-3">Third Box</div>
  <div  id="box-4">Fourth Box</div>
  <div  id="box-5">Fifth Box</div>
</div>

CodePudding user response：

If you try to write more sentences it will work. Or see it in the responsive situation, play with the width, try 300px;

CodePudding user response：

Try adjusting the width between 350 to 400 px. This might help with the issue.Check W#Schools for more understanding