How to increase the width of the frame when increasing the number of balls

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

when the ball is under the status of limited height and automatically shifts its longitudinal direction, how to make the balls be covered inside the frame. The frame will increase its width as the number of balls increases.

Answer 1

OK I am using Mozilla and this seems to work. This is your source code, but I set the width set in containerSlave to 75px .

This will work and does not look bad, but to be honest, you will need to use external code like JS (javascript). If you are open to this, I can show you a great trick to 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 at 20px 15px, #7FBBFC, #000); } 

Answer 2

Use document.getElementById("containerSlave").style.width = s + "px"; with s being the new size in pisels (integer). You will need to add the width attribute in the 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 } 

Note. Change <div class="containerSlave"> to <div id="containerSlave">