CSS Flex Box Layout: full-width row and columns

Question

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)

Leave a Comment Cancel reply