Flex Box breaking into Columns-CodePudding

I need help with my Flex Box Layout. It should break into two columns, with two divs each, the same time, the first smaller Box shifts down.

BTW: What is the correct Synthax, to target Child 2 and 3 at once?

#container_left {
  height: 500px;
  /*height for testing*/
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: wrap;
}

.item_left {
  flex-basis: 200px;
  margin: 0.5%;
  width: 10%;
}

.item_left:nth-child(2) {
  flex-basis: 30%;
  flex-grow: 1;
}

.item_left:nth-child(3) {
  flex-basis: 30%;
  flex-grow: 1;
}


/*Either for testing*/

div {
  border: solid 1px;
}

<div id="container_left">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Try placing two divs in html for two columns and inside those , place two these four divs (two in each).It will be easier.

CodePudding user response：

you forgot to set #container_left's width, i see no problem after i set its width
i think i should say this in the comment but my rep isn't enough yet