如何将Flexbox放入另一个？

我正在学习HTML5/CSS3一周,现在我正在研究flexbox.我只是有一个问题,我想用它们制作一个块"块",其中包含两个垂直方向的盒子和另一个块"block2",其中包含两个水平方框.

因此,我希望bblock中的block和block2以水平方式彼此相邻,并且块的两个部分在垂直方向上,而block2的两个部分以水平方式.

但它不起作用.

我该怎么办 ？先感谢您 !

.bblock {
  border: 2px solid #444;
  display: flex;
}
.block {
  border: 2px solid #444;
  max-width: 542px;
  /*margin: 0 auto;*/
}
.section:nth-child(1) background-color:orange;
 width:500px;
 max-height:250px;
 border:1px solid black;
 text-align:justify;
 padding-top:0px;
 padding-right:20px;
 padding-left:20px;
 padding-bottom:0px;
 border-radius:10px;

}
.section:nth-child(2) {
  background-color: yellow;
  width: 500px;
  max-height: 170px;
  border: 1px solid black;
  text-align: justify;
  padding-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-radius: 10px;
}
.block2 {
  border: 2px solid #444;
  max-width: 542px;
  margin-bottom: 10px;
  /*margin: 0 auto;*/
}
.section2:nth-child(1) {
  background-color: orange;
  width: 500px;
  max-height: 500px;
  border: 1px solid black;
  text-align: justify;
  padding-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-radius: 10px;
}
.section2:nth-child(2) {
  background-color: yellow;
  width: 500px;
  max-height: 170px;
  border: 1px solid black;
  text-align: justify;
  padding-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-radius: 10px;
}

#bblock {
  display: flex;
  /* flex-direction: row;  (this is the default value; it can be omitted) */
  height: 200px;
  border: 1px dashed black;
}
.block {
  flex: 1;
  background-color: orangered;
}
.block2 {
  flex: 1;
  background-color: lightgreen;
}