CSS: Wrapping Divs - css

Question

I have a CSS menu using the checkbox:checked trick here
But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?
I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.
I have created a JSFiddle that illustrates what I am trying to do.
Thank you :)
EDIT
I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day
EDIT
HTML:
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>
</div>
CSS:
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: left 1s;
left: 250px;
}
#container {
position: relative;
transition: left 1s;
left: 0px;
width: 100%;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}

Answer 1

The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.
instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.
Check the below snippet, where i am changing the padding value
* {
box-sizing: border-box;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: padding 1s;
padding-left: 250px;
}
#container {
position: relative;
transition: padding 1s;
left: 0px;
width: 100%;
padding-left: 0;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>

Answer 2

The problem is that you're moving the whole container so everything inside it moves too.
What you actually want to do is move the first .item.
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>

Answer 3

As per your JSFiddle example you have to change few properties :
HTML : one line has to added for clear the floating
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div style="clear:both"></div>
</div>
</div>
And the CSS would be :
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
transition: margin-left 1s;
margin-left: 0px;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}