将父div缩小为未知数量的浮动子(css或js)

Question

我有一个父div(显示:表)包含未知数量的浮动子.我现在希望它总是具有子行的宽度.

换句话说:如果父div比它的子的宽度更宽或更窄,则未使用的空间保留在父div中. - 我怎么能避免这个？

是否可以只使用css或者我是否需要JS来计算内部行的宽度并将其提供给父div？

这是简化的代码:

.wrapper {
    border: 1px solid black;
    display:table;
    width:90%;
}
.child {
    float:left;
    width: 100px;
    background-color:red;
    margin: 0 10px 10px 0;
}

<div class="wrapper">
    <div class="child">Text</div>
    <div class="child">Text</div>
    <div class="child">Text</div>
    <div class="child">Text</div>
    <div class="child">Text</div>
    <div class="child">Text</div>
</div>

请使用浏览器的宽度来查看右侧未使用的空白区域.

Answer 1

你可以这样尝试：演示

.wrapper {
    border: 1px solid black;
    width:auto;
    overflow:auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.child {
    display:inline-block;
    width: 15%;
    background-color:red;
    margin: 0 10px 10px 0;
    order: 1px solid #333;
    position: relative;
}