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.

So basically a row and two columns, with the row being fixed at lets say 100px in height, but all in one container. My code so far is:

#productShowcaseContainer {    display: inline-flex;    flex-flow: row wrap;    height: 600px;    width: 580px;    background-color: rgb(240, 240, 240);  }    #productShowcaseTitle {    display: inline-block;    height: 100px;    width: 100%;    background-color: rgb(200, 200, 200);  }    #productShowcaseDetail {    flex: 3;    background-color: red;  }    #productShowcaseThumbnailContainer {    flex: 2;    background-color: blue;  }

<div id="productShowcaseContainer">    <div id="productShowcaseTitle"></div>    <div id="productShowcaseDetail"></div>    <div id="productShowcaseThumbnailContainer"></div>  </div>

I know this can be achieved in many ways, but I would really prefer to use CSS Flex.

Answer 1

You've almost done it. However setting flex: 0 0 <basis> declaration to the columns would prevent them from growing/shrinking; And the <basis> parameter would define the width of columns.

In addition, you could use CSS3 calc() expression to specify the height of columns with the respect to the height of the header.

#productShowcaseTitle {   flex: 0 0 100%; /* Let it fill the entire space horizontally */   height: 100px; }  #productShowcaseDetail, #productShowcaseThumbnailContainer {   height: calc(100% - 100px); /* excluding the height of the header */ } 

#productShowcaseContainer {    display: flex;    flex-flow: row wrap;      height: 600px;    width: 580px;  }    #productShowcaseTitle {    flex: 0 0 100%; /* Let it fill the entire space horizontally */    height: 100px;    background-color: silver;  }    #productShowcaseDetail {    flex: 0 0 66%; /* ~ 2 * 33.33% */    height: calc(100% - 100px); /* excluding the height of the header */    background-color: lightgray;  }    #productShowcaseThumbnailContainer {    flex: 0 0 34%;  /* ~ 33.33% */    height: calc(100% - 100px); /* excluding the height of the header */    background-color: black;  }

<div id="productShowcaseContainer">    <div id="productShowcaseTitle"></div>    <div id="productShowcaseDetail"></div>    <div id="productShowcaseThumbnailContainer"></div>  </div>

(Vendor prefixes omitted due to brevity)

---

Alternatively, if you could change your markup e.g. wrapping the columns by an additional <div> element, it would be achieved without using calc() as follows:

<div class="contentContainer"> <!-- Added wrapper -->     <div id="productShowcaseDetail"></div>     <div id="productShowcaseThumbnailContainer"></div> </div> 

#productShowcaseContainer {   display: flex;   flex-direction: column;   height: 600px; width: 580px; }  .contentContainer { display: flex; flex: 1; } #productShowcaseDetail { flex: 3; } #productShowcaseThumbnailContainer { flex: 2; } 

#productShowcaseContainer {    display: flex;    flex-direction: column;      height: 600px;    width: 580px;  }    .contentContainer {    display: flex;    flex: 1;  }    #productShowcaseTitle {    height: 100px;    background-color: silver;  }    #productShowcaseDetail {    flex: 3;    background-color: lightgray;  }    #productShowcaseThumbnailContainer {    flex: 2;    background-color: black;  }

<div id="productShowcaseContainer">    <div id="productShowcaseTitle"></div>      <div class="contentContainer"> <!-- Added wrapper -->      <div id="productShowcaseDetail"></div>      <div id="productShowcaseThumbnailContainer"></div>    </div>  </div>

(Vendor prefixes omitted due to brevity)