CSS Flex Box Layout: full-width row and columns

Question

Hello fellow programmers!

I\'ve got a simple box-layout which I would love to achieve using flexbox, but I simply can\'t figure it out. It should look like this image.

Answer 1

Just use another container to wrap last two divs. Don't forget to use CSS prefixes.

#productShowcaseContainer {
   display: flex;
   flex-direction: column;
   height: 600px;
   width: 580px;
   background-color: rgb(240, 240, 240);
}

#productShowcaseTitle {
   height: 100px;
   background-color: rgb(200, 200, 200);
}

#anotherContainer{
   display: flex;
   height: 100%;
}

#productShowcaseDetail {
   background-color: red;
   flex: 4;
}

#productShowcaseThumbnailContainer {
   background-color: blue;
   flex: 1;
}

   
1
   

      
2
      
3