I'm trying to make the width of the parent div adjust based on how many inline-block displayed boxes can fit in one row. When the parent div reaches 100% width and a box is too wide for the first row, it should drop down to the next line. That's working fine, but I also want the parent div to shorten slightly and align horizontally center to eliminate any unwanted spaces. You can see the codepen example here.
Everything looks good when the box width is below 200, but once it hits 200 there are some unnecessary spaces to the right.
HTML:
<div class="hello">
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
<div class="hi"></div>
</div>CSS:
.hello{
background: red;
display: table;
width: auto;
margin: 0 auto;
}
.hi{
display: inline-flex;
width:200px;
height:170px;
margin: 10px;
background: blue;
}