1

Given the following list of items:

List items not at same width

How can I have the remaining items use the width of the of the ones preceding it. I would ideally prefer to not set flex-basis to a fixed width so things stay responsive.

The relevant CSS is as follows:

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 100px;
}
cloakedninjas
  • 4,007
  • 2
  • 31
  • 45
  • I changed to `display: grid` - see https://stackoverflow.com/questions/44154580/equal-width-flex-items-even-after-they-wrap – cloakedninjas Feb 14 '18 at 11:47