CSS flex last incomplete row items take the width of complete row items

Question

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 fiddle: https://jsfiddle.net/7wroxkhj/6/

What I want to achieve is, for the last row items to take the same width of preceding items. i.e.: item #7 and item #8 to have the same width of items from 1 to 6.

How can I achieve that?

UPDATE:

JS solutions are welcomed!

if the container has a fixed width, why not use a fixed width for this children? — Amit, Dec 30 '15 at 22:26
Actually, the container has `max-width` not `width`, so it's not actually fixed width. — user1181378, Dec 30 '15 at 22:30
It was a mistake. Again, it's `max-width` not `width`, updated my question. — user1181378, Dec 30 '15 at 22:39
Is there a specific number of flex items, or is it variable? — Michael Benjamin, Dec 30 '15 at 23:34
Duplicate of [CSS Flexbox: Make All Items same Size without Clipping](http://stackoverflow.com/q/34402753/1529630) — Oriol, Jan 01 '16 at 00:06

Michael Benjamin · Accepted Answer · 2015-12-31T05:30:26.120

2

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

HTML

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

CSS

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

DEMO

edited Dec 31 '15 at 05:30

answered Dec 30 '15 at 23:53

Michael Benjamin

346,931
104
581
701

This would work well only with expected number of items. – user1181378 Dec 31 '15 at 10:33
Actually, this solution doesn't depend on the number of items. Try adding and removing divs in the demo (always keeping hidden divs last). – Michael Benjamin Dec 31 '15 at 12:05
This solution exploits the `max-width` of the container, and the `min-width` of each item, which results in a predictable number of items in each row. – Michael Benjamin Dec 31 '15 at 12:09
The only thing you may want to consider is releasing the fixed `height` of the container, possibly making it a `min-height`, so it could expand with additional items, or giving it `overflow: auto`, to generate a scrollbar. – Michael Benjamin Dec 31 '15 at 12:12
1

Just tested everything again. Seems to work perfectly (except for the container height issue, which depends on your preference). If I'm misinterpreting or missing something just let me know. – Michael Benjamin Dec 31 '15 at 20:23
1

No. Using dummy child elements solved it. Didn't have to use the hidden class though. – user1181378 Jan 20 '16 at 14:42

vals · Answer 2 · 2015-12-31T07:12:14.873

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: 130px 1;
  margin: 10px;
  background-color: yellow;
  height: 10px;
}
.child {
  background: blue;
  margin: 10px;
  flex: 130px 1;
  color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  font-size: 60px;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="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.

It makes no difference at all. See how it looks: http://imgur.com/YyanRML — user1181378, Dec 30 '15 at 22:51

score -2 · Answer 3 · edited Jan 01 '16 at 00:27

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: 0 1 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: 1 0 10%;
  margin: 1%;
}

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

 <section class="case">
  <div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="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

Add the 9th div

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;
 }

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

</div>

Why the downvote? My answer is just as valid as Michael_D's . — zer00ne, Dec 31 '15 at 00:03
How's it valid? This is the result: http://imgur.com/YyanRML — user1181378, Dec 31 '15 at 19:56
Did you take a look at my demos, because this is what I see:http://imgur.com/a/xwps3 — zer00ne, Dec 31 '15 at 21:48
@user1181378 Ok, I know what's going on, I'm using Chrome and you must be using Firefox. Ok I have done some cross browser testing and I believe this will work. Please see update. — zer00ne, Dec 31 '15 at 23:35

CSS flex last incomplete row items take the width of complete row items

3 Answers3

UPDATE

Linked