5

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.

Want to show the following

tutankhamun
  • 880
  • 2
  • 11
  • 21
Duke
  • 165
  • 2
  • 3
  • 12
  • 2
    This is a known issue: http://stackoverflow.com/questions/28882458/flex-box-container-width-doesnt-grow – Jean-Paul Apr 01 '15 at 14:03
  • Flex-Box has a number of known issues. http://caniuse.com/#search=flex-box It also needs a webkit prefix for use with Safari. – AJStacy Apr 05 '15 at 23:59

2 Answers2

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);
}
smac89
  • 39,374
  • 15
  • 132
  • 179
Jtuck
  • 300
  • 4
  • 7
0

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

Michael Myers
  • 188,989
  • 46
  • 291
  • 292
SuperUser 2.0
  • 11
  • 2
  • If you would like to show a live demo, please use a [Stack Snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) instead of linking to your own site. – Michael Myers Apr 08 '15 at 00:02