Filling remaining space in row by last element

Question

I have something like this:

.container {
  width: 350px;
  border: 1px solid black;
}

.item {
  display: inline-block;
  padding: 10px 20px;
  background-color: green;
}

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

I need to get the last item fill the remaining space for itself in row. Items should be placed in sequence.

(Sorry for my Google translate...:( )

Answer 1

You can use css3 flexbox:

.container {
  flex-wrap: wrap;
  display: flex;
}
.container .item {
  /* This property will expand the last item to the remaining width */
  flex-grow: 1;
}

.container {
  flex-wrap: wrap;
  width: 350px;
  display: flex;
}

.item {
  border: 1px solid #000;
  background-color: green;
  padding: 10px 20px;
  flex-grow: 1;
}

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