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

This is copied from above, but condensed slightly and re-written in semantic terms. Note: #Container has display: flex; and flex-direction: column;, while the columns have flex: 3; and flex: 2; (where "One value, unitless number" determines the flex-grow property) per MDN flex docs.

#Container {
  display: flex;
  flex-direction: column;
  height: 600px;
  width: 580px;
}

.Content {
  display: flex;
  flex: 1;
}

#Detail {
  flex: 3;
  background-color: lime;
}

#ThumbnailContainer {
  flex: 2;
  background-color: black;
}