Ebeveyn div'u bilinmeyen sayıda kayan çocuğa küçültme (css veya js)

Question

Bilinmeyen sayıda kayan çocuğu saran bir ebeveyni (ekran: tablo) var. Şimdi her zaman çocuk satırlarının genişliğine sahip olmasını istiyorum. Başka bir deyişle: Üst div, çocuklarının katlarından daha geniş veya daha dar ise, kullanılmayan alan ebeveyn div içinde kalır. - Bunu nasıl önleyebilirim?

Yalnızca css ile mümkündür veya satırların genişliğini hesaplamak ve üst div'e vermek için JS'ye ihtiyacım var mı?

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

sağ tarafta kullanılmayan boşluk görmek için tarayıcınızda genişliğine ile oynamak edin:

İşte basitleştirilmiş kod.

Answer 1

Böyle deneyebilirsiniz: 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; 
} 

Kontrol dışarı bu Demo http://jsfiddle.net/wtxafjw0/1/

bu 4 alt öğeleri ve çocuk genişliğinin en az almalarına zorlamak için% olarak varsayar tüm alanı yatay olarak yukarı