Как избавиться от лишнего пространства создает flex-wrap

Question

Я пытаюсь создать выпадающее меню с флексом, когда имеется более 6 элементов, элементы будут иметь ширину 50% и менее 6 элементов - ширину 100%.

Родительский контейнер должен иметь максимальную ширину и должен уменьшаться, если их не много.
Итак, у меня получилось, но я не могу избавиться от лишних «пробелов» справа от предметов шириной 100%. У кого-нибудь есть идея решить эту проблему? Дополнительное пространство увеличивается, если в элементах много текста, что делает его ненужным большим.

ul {
  background: red;
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 400px;
  margin: 0;
  padding: 10px;
  list-style: none;
  min-width: 0;
  align-content: start;
}

li {
  flex-basis: 50%;
  margin: 0;
  padding: 0;
}


/* If there are less than 6 */
li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  flex-basis: 100%;
  min-width: 0px;
}

<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
</ul>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

Answer 1

Думаю, было бы сложно решить с помощью flexbox, но вы можете легко добиться того же, используя float без лишних пробелов:

ul {
  background: red;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
  max-width: 400px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

li {
  float: left;
  padding: 0 5px;
}

li:nth-child(odd) {
  clear: left;
}

/* If there are less than 6 */
li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  float: none;
}

<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
</ul>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

Или CSS сетка:

ul {
  background: red;
  display: inline-grid;
  column-gap:5px;
  max-width: 400px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

li:nth-child(2) {
  grid-column:2;
}

/* If there are less than 6 */
li:nth-last-child(-n+6):first-child ~ :nth-child(2) {
  grid-column:initial;
}

<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
</ul>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>