Встроенные горизонтальные элементы списка, разверните расширенные элементы в следующей строке (достигнута минимальная ширина)

Question

У меня есть переменные элементы в списке, и я хочу расширить их до 100% для достижения максимального доступного пространства (в колонке жидкости).

<------------------100%----------------->
|---------|---------|---------|---------|
|    li   |   li    |    li   |   li    |
|---------|---------|---------|---------|

при изменении размера браузера:

<--------------100%--------------->
|-----------|----------|----------|
|     li    |    li    |    li    |
|-----------|----------|----------|
|     li    |
|-----------|

На самом деле при изменении размера браузера:

<------------------100%-------------->
|---------|---------|---------|
|    li   |   li    |    li   |
|---------|---------|---------|
|    li   |
|---------|

Все элементы имеют минимальную ширину 220 пикселей, и я хочу автоматически расширять элементы при достижении минимальной ширины.

• 1
• 2
• 3
• 4
• 5
• 6

ul {text-align:justify;border:1px solid #ccc;width:100%;overflow:hidden}
ul li {float:left;min-width:220px}

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
</ul>