Check out my fiddle:
#container {
background-color: green;
}
.result {
border-radius: 6px;
display: inline-block;
width: 100%;
max-width: 160px;
min-width: 100px;
height: 160px;
border: 1px solid black;
background-color: white;
margin: 10px;
}<div id="container">
<div class="result">1</div>
[...]
</div>When adjusting the browser width, unwanted "green" areas can appear. The goal is for the "cards" to always extend to 100% and only go to a new line when they are smaller than 100 pixels. Despite setting min-width, max-width, and 100% width, the cards do not shrink but instead move to a new line when the area is too narrow.