user1181378 user1181378 - 5 months ago 54
CSS Question

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

I'm creating a flexbox; a container has a

, say
max-width = 500px
, and child items each has
min-width: 130px
flex-grow: 1
to fill the the whole row space.

Here's the fiddle:

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?


JS solutions are welcomed!

Answer Source

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


<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 */


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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download