У меня есть следующий макет:
#limited-width {
width: 100%;
max-width: 200px;
margin: 0 auto;
font-size: 18px;
}
ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
margin: 20px;
}
ul > li {
display: block;
text-align: center;
flex: 1 0 auto;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 4px 7px;
border: 2px solid rgba(0,0,0,.3);
background-color: rgba(0,0,0,.03);
}
<div id="limited-width">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
<li>Banana</li>
<li>Tomato</li>
<li>Pear</li>
<li>Lemon</li>
</ul>
</div>