Shrink parent div to unknown number of floating children (css or js)

Question

I have a parent div (display:table) that wraps an unknown number of floating children. I now want it to always have the width of the children's rows.

In other words: If the parent div is wider or narrower than a multiple of it's children, unused space remains within the parent div. - How can I avoid this?

Is it possible with css only or do I need JS to calculate the width of the rows inside and give it to the parent div?

Here's the simplified code:

.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>

Please play with the width of your browser to see the unused white space on the right side.

Answer 1

You can try like this: Demo

.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;
}