Equal width flex items even after they wrap

Question

Is it possible to make a pure CSS solution like this:

1. Items have some min-width.
2. They should grow dynamically to fill all container widt

Answer 1

Right not, there is no pure CSS solution. Flexbox always tries to fill whole width of container with growable items. So, you'll need to insert some hidden items that will fill the empty space while being invisible to user.

Try this:

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

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

.item-hidden {
  min-width: 100px;
  flex-grow: 1;
  border: 1px solid transparent;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  

  

  

  

Similar problem was discussed here: Flex-box: Align last row to grid

In future, you will be able to use multiple ::after pseudoelements, so you won't need to insert additional items to HTML.