html - How to increase the frame's width when the number of balls increases -


here 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 @ 20px 15px, #7fbbfc, #000); } 

when ball under status of limited height , automatically shift longitudinal direction, how make balls covered within frame. frame increase width number of ball increase.

want show following

ok i'm using mozilla , seems work. original code set width fixed in containerslave 75px.

this work , doesn't bad honest going need use outside code js (javascript). if you're open that, can show cool trick fix it.

.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 @ 20px 15px, #7fbbfc, #000); } 

Comments

Popular posts from this blog

How to run C# code using mono without Xamarin in Android? -

python - Specify path of savefig with pylab or matplotlib -

c# - SharpSsh Command Execution -