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

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 shift its longitudinal direction, how to make the balls to be covered within the frame. The frame will increase its width as the number of ball increase.

Answer 1

OK I'm using Mozilla and this seems to work. This is your original code but I set width fixed in containerSlave to 75px.

This would work and doesn't look bad but to be honest your going to need to use an outside code like JS (javascript). If you're open to that, I can show you a cool 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);
}