Css Flex Last Incomplete Row Items Take The Width Of Complete Row Items

I'm creating a flexbox; a container has a max-width, say max-width = 500px, and child items each has min-width: 130px and flex-grow: 1 to fill the whole row space. Here's the fiddl

Solution 1:

You may want to consider something along the lines of invisible flex items at the end of the list.

HTML

<div class="parent">
    <divclass="child">1</div><divclass="child">2</div><divclass="child">3</div><divclass="child">4</div><divclass="child">5</div><divclass="child">6</div><divclass="child">7</div><divclass="child">8</div><divclass="child hidden">9</div>/* new */<divclass="child hidden">10</div>/* new */
</div>

CSS

.hidden {
    visibility: hidden;
    height: 0;
    font-size: 0;
    margin: 010px;
}

DEMO

Solution 2:

Give top the pseudo element the same properties that you are giving the elements, but a height very low.

But if more than 2 pseudo element are needed, you need another technique

.parent {
  background: red;
  max-width: 500px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
}
.parent::after {
  content: '';
  flex: 130px1;
  margin: 10px;
  background-color: yellow;
  height: 10px;
}
.child {
  background: blue;
  margin: 10px;
  flex: 130px1;
  color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  font-size: 60px;
}

<divclass="parent"><divclass="child">1</div><divclass="child">2</div><divclass="child">3</div><divclass="child">4</div><divclass="child">5</div><divclass="child">6</div><divclass="child">7</div><divclass="child">8</div></div>

Note that the real height for the pseudo would be 0px, and the background yellow wouldn't be there...

Those are just for demo purposes

Edit: FF handles different the situation where the minimun height comes from min-height and the situation where it comes from flex-basis. But Chrome handles those just the same. So my previous solution worked only for Chrome. (Don't know for sure which is "standard".

I changed the min-height of .child and moved it to flex-basis, now it works ok both in Chrome and FF.

Solution 3:

UPDATE

Ok, I finally figured out why OPs was seeing everything so differently than I was. I was using Chrome and OP was using Firefox. The following is the newest demo that should be compatible with Chrome and Firefox.

• The major changes include wrapping the whole layout in a flex-column container.
• Removed the margins: 10px; because flexbox with box-sizing doesn't handle margins or borders as expected.
• Used a plethora of min and max height and width properties.
• Used justify-content: space-between and align-items: space-between on column and row directions which made a tight yet flexible grid.

https://jsfiddle.net/zer00ne/fkczpggy/

.case {
  background: red;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: space-around;
  margin: auto 0;
  max-width: 500px;
  overflow-y: auto;
}

.parent {
  background: red;
  height: 99vh;
  min-height: 100%;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: space-between;
  flex: 01 auto;
  overflow-y: auto;
}

.child {
  background: blue;
  min-width: 130px;
  min-height: 130px;
  border: 1% solid transparent;
  color: #FFFFFF;
  height: auto;
  text-align: center;
  font-size: 60px;
  flex: 1010%;
  margin: 1%;
}

.child:last-of-type {
  visibility: hidden;
}

<sectionclass="case"><divclass="parent"><divclass="child">1</div><divclass="child">2</div><divclass="child">3</div><divclass="child">4</div><divclass="child">5</div><divclass="child">6</div><divclass="child">7</div><divclass="child">8</div><divclass="child">9</div></div></section>

---

OLD

---

Here's a lazy but effective way:

Updated to reflect dynamic variable number of divs

Use nth-of-type(n+9) or this would be better: last-of-type

1. Add the 9th div

2. Then add this single line to your CSS:

   .child:nth-of-type(n+9) {
     visibility: hidden;
   }
   

   or

   .child:last-of-type {
     visibility: hidden;
   }
   

https://jsfiddle.net/zer00ne/4fp88arh/

.parent {
  background: red;
  max-width: 500px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
/*.parent:after {
  content: '';
  flex-grow: 1000000000;
}*/.child {
  background: blue;
  min-width: 130px;
  margin: 10px;
  flex-grow: 1;
  color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  font-size: 60px;
}

/*.child:nth-of-type(n+9) {
  visibility: hidden;
}*/.child:last-of-type {
   visibility: hidden;
 }

<divclass="parent"><divclass="child">1</div><divclass="child">2</div><divclass="child">3</div><divclass="child">4</div><divclass="child">5</div><divclass="child">6</div><divclass="child">7</div><divclass="child">8</div><divclass="child"></div></div>