Incomplete last line V1

by Simon Hi

HTML

<div id="A">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
  <span>F</span>
  <span>G</span>
  <span>H</span>
  <span>I</span>
  <span>J</span>
  <span>K</span>
</div>

CSS

#A {
  display: flex;
  flex-flow: row wrap;
  font-size: 3em;
  background: green;
  padding: 0.125em;
}

#A span {
  flex: 1;
  background: yellow;
  min-width: 2em;
  margin: 0.125em;
  padding: 0;
  text-align: center;
}

JavaScript

function magic() {
  var a, z, w, k, km;
  a = document.getElementById("A");
  z = a.children;
  w = z[0].getBoundingClientRect().width;
  km = z.length;
  // resize no more than half elements
  for (k = ((km + 1) >> 1); k < km; k++)
    z[k].style.maxWidth = w + "px";
}
setInterval(magic, 1000);

// see http://jsfiddle.net/6e72oa7e/ for a solution without setInterval()