title: EMBER - Each handler is generating ember-view div around my component
body: <p>So, my container is a <code>flexbox</code> and I am trying to render components with the handlebars <code>each</code> helper.  The problem is that <code>flexbox</code> only affects its immediate children and being that the <code>each</code> helper is surrounding each of the components it generates with a <code>div</code> that has the class of <code>ember-view</code>, my <code>flexbox</code> is obviously affecting the <code>divs</code> the helpers generating instead of my components.</p>
  
  <p>EXAMPLE:</p>
  
  <pre><code>    {{#bi-board-section}}
          &lt;p class="text text--watermark text--bold"&gt;NEW&lt;/p&gt;
          {{#each model.orders as |order|}}
              {{bi-order-card order=order}}                
          {{/each}}
      {{/bi-board-section}}
  </code></pre>
  
  <p>OUTPUT:
  <a href="https://i.stack.imgur.com/mJFQX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mJFQX.png" alt="Example of dom problem"></a></p>
  
  <p>What would be the best of getting around this while still using the <code>each</code> helper?</p>