Riduci div genitore al numero sconosciuto di figli fluttuanti (css o js)

Question

Ho un div genitore (display: tabella) che racchiude un numero sconosciuto di bambini fluttuanti. Ora voglio che abbia sempre la larghezza delle righe dei bambini.

In altre parole: se il div padre è più largo o più stretto di un multiplo dei suoi figli, lo spazio non utilizzato rimane all'interno del div padre. - Come posso evitare questo?

È possibile solo con css o ho bisogno di JS per calcolare la larghezza delle righe all'interno e darlo al div padre?

Ecco il codice semplificato:

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

Si prega di giocare con la larghezza del tuo browser per vedere lo spazio bianco non utilizzato sul lato destro.

Answer 1

Si può provare in questo modo: 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; 
} 

Answer 2

.wrapper { 
    border: 1px solid black; 
    display:table; 
    width: 90%; 
    margin-bottom: -10px; 
} 
.child { 
    box-sizing: border-box; 
    float:left; 
    width: 24.25%; 
    background-color:red; 
    margin: 1% 1% 0 0; 
} 
.child:nth-child(-n+4){ 
    margin-top: 0; 
} 

.child:nth-child(4n) { 
    margin-right: 0px; 
} 

Partenza questa demo http://jsfiddle.net/wtxafjw0/1/

Ciò presuppone minimo di 4 elementi figlio e la larghezza bambino è in% di costringerli prendere su tutto lo spazio in orizzontale.