内联块包裹后移除人工边缘

Question

我在容器中有许多内联块元素。容器（图中浅蓝色）也是内联块，因此它应包含其内容and be as small as possible.

当这些内联元素开始换行时（因为我将页面缩小），我希望容器继续尽可能小，以便容器及其内容集中在我的页面上。但容器为不再存在的元素腾出空间。我怎么解决这个问题？

此容器位于页面的中心位置：

＆＃13;

＆＃13;

body,html{
 margin:0;
 width:100%;
 height:100%;
}


.card{
    background-color: red;
    border: 1px solid;
    width:100px;
    height:160px;
    display:inline-block;
    vertical-align:middle;
}

.card-container{
    background-color: lightblue;
    display: inline-block;
    position: relative;
    transform: translateX(-50%);
    left:50%;
}

＆＃13;

<div class="card-container">
    <div class="card"></div> 
    <div class="card">+</div>
    <div class="card"></div> 
    <div class="card">+</div>
    <div class="card"></div>
 </div>

＆＃13;

＆＃13;

＆＃13;