CSS Flex Box Layout: Full-Width Row and Columns

CSS Flex Box Layout: full-width row and columns

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>

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

Fullwidth and multiple columns using flexbox

You need to set flex-wrap: wrap on flex container, and then flex: 0 0 100% on full-width items and flex: 0 0 50% on half-width items. Also you should add box-sizing: border-box.

* {  box-sizing: border-box;}.collage {  display: flex;  flex-wrap: wrap;}.collage-item {  border: 1px solid black;  flex: 0 0 50%;  padding: 10px;}.fullwidth {  flex: 0 0 100%;}

<div class="collage">  <!-- fullwidth -->  <div class="collage-item fullwidth">a</div>
  <!-- two columns -->  <div class="collage-item">b</div>  <div class="collage-item">c</div>
  <!-- fullwidth -->  <div class="collage-item fullwidth">d</div></div>

Horizontal full width with overflow in vertical flexbox

Couple of issues:

• You need to use view-width(vw) for min-width. Change min-width: 100vh; to min-width: 100vw;. This alone doesn't resolve the issue.
• Main issue is because the .header is overflowing. You can check this by adding a fat border to it and .container element. We can fix this using two changes:

    .container {
      ...
      width: max-content;
    }

    .header .col {
      ...
      width: 100px;
    }

Demo:

const groups = [];

for (let i = 0; i < 15; i++) {
  const rows = [];
  for (let j = 0; j < 15; j++) {
    rows.push({ cols: ["col 1", "col 2", "col 3", "col 4", "col 5", "col 6", "col 7", "col 8", "col 9" ] });
  }

  groups.push({ group: 'test' + i, open: false, rows});
}

var app = new Vue({el: '#app', data: { rows: groups } })

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vw;
  
  width: max-content;
}

.header {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
}

.header .col {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 0;
  background: rgb(250, 189, 189);
  padding: 0 2px;
  outline: 2px solid black;
  
  width: 100px;
}

.vertical-content {
  display: flex;
  flex-direction: column;
}

.vertical-content .grouped-row {
  flex-grow: 1;
  background: rgb(251, 251, 180);
  outline: 2px solid black;
  display: flex;
  flex-direction: column;
}

.vertical-content .row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.vertical-content .row .col {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 0;
  background: rgb(150, 150, 238);
  padding: 0 2px;
  outline: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>

<body>
  <div class="container" id="app">
    <div class="header">
      <div class="col">Col 1</div>
      <div class="col">Col 2</div>
      <div class="col">Col 3</div>
      <div class="col">Col 4</div>
      <div class="col">Col 5</div>
      <div class="col">Col 6</div>
      <div class="col">Col 7</div>
      <div class="col">Col 8</div>
      <div class="col">Col 9</div>
    </div>
    <div class="vertical-content">
      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
        <div>
          {{ row.group }}
        </div>
        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
        </div>
      </div>
    </div>
  </div>

How the flex box item use the full width of its parent

This was actually kind of a brainteaser until I realized you need CSS grid instead of Flexbox :). There doesn't seem to exist a solution with Flexbox without adding "ghost divs", which isn't really a good option.

.container {  width: 400px;  border: 2px solid red;  display: grid;  grid-template-columns: 110px 110px 110px;  justify-content: space-between;}
.item {  padding: 20px;  border: 1px solid blue;}

<div class="container">  <div class=item>Box 1</div>  <div class=item>Box 2</div>  <div class=item>Box 3</div>  <div class=item>Box 4</div>  <div class=item>Box 5</div></div>

How to stop CSS flex column from filling width in three-columns row?

To do this with flexbox you can try using justify-content: flex-start;. To get 3 columns per row, apply flex-basis: ~30%; to the flex items. Something like this:

 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block {
  background-color: grey;
  flex-basis: 30%;
  margin: 5px;
}

JSfiddle

Hope it helps!

---

Related Topics