Come aumentare la larghezza del telaio quando il numero di palline aumenta

Question

here is my code

.containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 2px 2px 2px 2px; 
    padding: 2px 2px 2px 2px; 
    height: 220px; 
    /*item height x 10*/ 
    border: 2px solid red; 
} 

.containerSlave .ball { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    line-height: 20px; 
    text-align: center; 
    text-shadow: 0 1px 1px #000; 
    font-size: 15px; 
    color: #ffffff; 
    margin: 2px 2px 2px 2px; 
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000); 
} 

quando la palla è in stato di altezza limitata e spostare automaticamente la sua direzione longitudinale, come fare le palle da trattare all'interno telaio. Il fotogramma aumenterà la sua larghezza al crescere del numero di palline.

Answer 1

Uso document.getElementById("containerSlave").style.width = s + "px"; con s essere la nuova dimensione in pizels (intero). Dovrai aggiungere un attributo width al CSS.

#containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 2px 2px 2px 2px; 
    padding: 2px 2px 2px 2px; 
    height: 220px; 
    /*item height x 10*/ 
    border: 2px solid red; 
    width: <!-- yourwidth --> px 
} 

Nota: Modificare l'OK <div class="containerSlave">-<div id="containerSlave">

Answer 2

sto usando Mozilla e questo sembra funzionare. Questo è il tuo codice originale ma ho fissato la larghezza fissata in containerSlave a 75px.

Questo potrebbe funzionare e non sembra male, ma per essere onesti è necessario utilizzare un codice esterno come JS (javascript). Se sei aperto a questo, posso mostrarti un bel trucco per sistemarlo.

.containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 2px 2px 2px 2px; 
    padding: 2px 2px 2px 2px; 
    height: 220px; 

    **width:75px;** 

    /*item height x 10*/ 
    border: 2px solid red; 
} 

.containerSlave .ball { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    line-height: 20px; 
    text-align: center; 
    text-shadow: 0 1px 1px #000; 
    font-size: 15px; 
    color: #ffffff; 
    margin: 2px 2px 2px 2px; 
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000); 
}