Incomplete last line V2

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-wrap: wrap;
  flex-direction: row;
  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

// assume all children have the same tagName
function magic(id) {

  var p, z, e, t;
  p = document.getElementById(id);
  z = p.children;
  km = z.length - 2;
  if (km) {
    // add some elements with no heigth
    t = z[0].tagName;
    for (k = 0; k < km; k++) {
      e = document.createElement(t);
      e.style.height = "0";
      e.style.marginTop = "0";
      e.style.marginBottom = "0";
      e.style.paddingTop = "0";
      e.style.paddingBottom = "0";
      e.style.borderTopWidth = "0";
      e.style.borderBottomWidth = "0";
      p.appendChild(e);
    }
  }
}
magic("A");