title: CSS: dynamic width of child elements to be fit the parent width
body: <p>When writing CSS, I always find myself missing auto child width feature of floated child elements, to fit their total width to the parent's width.<br>
  In fact I find it hard to phrase in Google search box, so you may consider this example:<br>
  A <code>ul</code> contains four <code>li</code><br>
  <code>li</code> has <code>float: left; list-style: none;</code> and because there are four <code>li</code> elements, each has <code>width: 25%;</code><br>
  What if I want to make the number of <code>li</code> elements variable, instead of fixed <em>four</em>, so <code>li</code> gets width of 20% when they are <em>five</em>, or gets width of 10% if they are <em>ten</em>, or width of 50% when they are <em>two</em> etc..? Given that the <code>ul</code> has an explicit fixed width always.</p>