Flexbox
Utilizando a propriedade flexbox do css é possível manipular melhor a questão de fluidez que deseja entre os itens. Analise a diferença da class .content-wrap onde adiciono um novo parâmetro na propriedade flex-flow.
Sobre a questão cross-browser dessa propriedade, ela já está amplamente difundida nos browsers atuais. Só vai precisa analisar e alinhar com seu projeto se vai dar suporte para algum browser antigo que não suporte flex-box, assim você vai precisar analisar um fallback js para manipular seus elementos e manter a flexibilidade que deseja.
Tirando essa questão de compatibilidade, tudo perfect no CSS.
Aconselho também uma leitura sobre essa propriedade flex-box.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Esse guide é super intuitivo também.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Espero ter conseguido ajudar, se precisar de ajuda só comentar.
.box-container {
background: #ccc;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-around;
max-width: 600px;
padding: 0;
margin: 0 auto;
}
.content-wrap {
flex-flow: row wrap;
}
.box-item {
background: tomato;
border: 1px solid #fff;
color: #fff;
flex: 1 auto;
list-style: none;
padding: 20px;
margin: 0;
text-align: center;
}
<h2>Primeira lista</h2>
<ul class="box-container">
<li class="box-item">Item 1</li>
<li class="box-item">Item 2</li>
<li class="box-item">Item 3</li>
<li class="box-item">Item 4</li>
<li class="box-item">Item 5</li>
<li class="box-item">Item 6</li>
</ul>
<h2>Segunda lista</h2>
<ul class="box-container">
<li class="box-item">Item 1</li>
<li class="box-item">Item 2</li>
<li class="box-item">Item 3</li>
</ul>
<h2>Terceira lista</h2>
<ul class="box-container">
<li class="box-item">Item 1</li>
<li class="box-item">Item 2</li>
<li class="box-item">Item 3</li>
<li class="box-item">Item 4</li>
<li class="box-item">Item 5</li>
<li class="box-item">Item 6</li>
<li class="box-item">Item 7</li>
<li class="box-item">Item 8</li>
</ul>
<h2>Quarta lista com wrap</h2>
<ul class="box-container content-wrap">
<li class="box-item">Item 1</li>
<li class="box-item">Item 2</li>
<li class="box-item">Item 3</li>
<li class="box-item">Item 4</li>
<li class="box-item">Item 5</li>
<li class="box-item">Item 6</li>
<li class="box-item">Item 7</li>
<li class="box-item">Item 8</li>
<li class="box-item">Item 9</li>
<li class="box-item">Item 10</li>
</ul>
<h2>Quinta lista com wrap</h2>
<ul class="box-container content-wrap">
<li class="box-item">Item 1</li>
<li class="box-item">Item 2</li>
<li class="box-item">Item 3</li>
<li class="box-item">Item 4</li>
<li class="box-item">Item 5</li>
<li class="box-item">Item 6</li>
<li class="box-item">Item 7</li>
<li class="box-item">Item 8</li>
<li class="box-item">Item 9</li>
<li class="box-item">Item 1</li>
<li class="box-item">Item 12</li>
<li class="box-item">Item 13</li>
<li class="box-item">Item 14</li>
<li class="box-item">Item 15</li>
</ul>
min-width
para os itens?