U2's extra spans interfere with flex layouts

[bshepherdson]

The following model demonstrates this problem:

CLASS({
  package: 'foam.demos',
  name: 'Repro',
  extends: 'foam.u2.Element',
  imports: [
    'dynamic',
  ],
  properties: [
    {
      name: 'stuff',
      factory: function() {
        var a = [];
        for (var i = 0; i < 8; i++) {
          a.push('' + (Math.floor(Math.random() * 20)));
        }
        return a;
      }
    },
  ],
  methods: [
    function initE() {
      this.cls(this.myCls());
      this.add(this.dynamic(function(stuff) {
        return stuff.map(function(x) {
          return this.E('span').cls(this.myCls('cell')).add(x);
        }.bind(this));
      }.bind(this), this.stuff$));
    },
  ],
  templates: [
    function CSS() {/*
      ^ {
        display: flex;
      }
      ^cell {
        background-color: #e0e0e0;
        flex-grow: 1;
        margin: 8px;
      }
    */},
  ]
});

It intends to fill the available width with the 10 boxes, but instead they're minimum-size. See the extra <span>s introduced by the dynamic code.

[bshepherdson]

This is mostly fixed by 474c1b53b, 193d8d03e433225cf2256b46a1c5b2dc05c8d5f3 and f5cbc69d937dd8ca6f1e83f4299b9f5864c5a010.

Can be worked around by generating a single element with a dynamic list of children, rather than adding a dynamic that returns an array.