css flex-box wrap elements going out of view port-CodePudding

Im facing a problem with css flex box. attaching the link for example

.child {
  width: 72px;
  height: 72px;
}

.parent {
  position: fixed;
  right: 0;
  display: flex;
  /* change to column to put them all under eachother */
  flex-direction: row;
  flex-wrap: wrap;
}

<div >
  <div >
    <div  style="background: red"></div>
    <div  style="background: blue"></div>
    <div  style="background: green"></div>
    <div  style="background: pink"></div>
  </div>
  <div >
    <div  style="background: aqua"></div>
    <div  style="background: grey"></div>
    <div  style="background: tomato"></div>
    <div  style="background: skyblue"></div>
  </div>
</div>

Let me know if this answered your question, if it didn't please let me know so I can look into it further.

CodePudding user response：

this will work

.child {
  width: 72px;
  height: 72px;
}

.parent {
  position: fixed;
  right: 0;
  width:150px;
  display: flex;
  flex-direction:row;
  /* change to column to put them all under eachother */
  flex-wrap: wrap;
}

<div >
    <div  style="background: red"></div>
    <div  style="background: blue"></div>
    <div  style="background: green"></div>
    <div  style="background: pink"></div>
    <div  style="background: aqua"></div>
    <div  style="background: grey"></div>
    <div  style="background: tomato"></div>
    <div  style="background: skyblue"></div>
</div>