CSS: self-adjusting table with max width that clips to content width - css

Question

I am struggling to make the adjustable parent div fit the content:
(I want the widening white space on the right to go away)
http://jsfiddle.net/TDq7T/42/
max-width: and width:fit-content or auto, don't work together
#parent {
display: block;
max-width:40%;
overflow:hidden;
background: rgba(255,255,255,1.0);
}
#child {
display: block;
width:50px;
height:50px;
background: rgba(0,0,0,1.0);
float:left;
margin: 10px;
}
I tried changing the display modes, clip: auto, width:auto adding another subparent but to no avail :(

Answer 1

since you used javascript to generate html elements I believe it won't be a problem to style them with javascript (jquery) as well:
http://jsfiddle.net/TDq7T/75/
function calculate_m_width() {
var d_width= $(document).width();
var m_width= Math.floor((d_width*.4)/70)*70;
$("#menu").css("width",m_width);
}
calculate_m_width();
window.onresize = function() {
calculate_m_width();
}
each time the browser is resized the width of the menu will be recalculated as number of elemnets x their width (50+2x10)

Answer 2

Use display: flex; on #menu (and erase float: center):
http://jsfiddle.net/d3rp294u/

Answer 3

I'm not sure that is what you want, but I will give a try.
var menu = document.createElement('div');
menu.id = 'menu';
document.body.appendChild(menu);
var d = document.createElement('div');
d.id = 'child';
document.body.appendChild(d);
var e = document.createElement('div');
e.id = 'child';
document.body.appendChild(e);
var f = document.createElement('div');
f.id = 'child';
document.body.appendChild(f);
var g = document.createElement('div');
g.id = 'child';
document.body.appendChild(g);
var h = document.createElement('div');
h.id = 'child';
document.body.appendChild(h);
menu.appendChild(d);
menu.appendChild(e);
menu.appendChild(f);
menu.appendChild(g);
menu.appendChild(h);
#menu {
padding: 0;
margin: 0;
max-width: 280px;
overflow: hidden;
background: #ccc;
display: flex;
float: center;
-webkit-flex-flow: row wrap;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
#child {
background: rgba(0, 0, 0, 1.0);
width: 50px;
height: 50px;
margin: 10px;
align-self: flex-start;
display:
}