Question: So, my container is a `flexbox` and I am trying to render components with the handlebars `each` helper. The problem is that `flexbox` only affects its immediate children and being that the `each` helper is surrounding each of the components it generates with a `div` that has the class of `ember-view`, my `flexbox` is obviously affecting the `divs` the helpers generating instead of my components.

EXAMPLE:

```
    {{#bi-board-section}}
        <p class="text text--watermark text--bold">NEW</p>
        {{#each model.orders as |order|}}
            {{bi-order-card order=order}}                
        {{/each}}
    {{/bi-board-section}}

```

OUTPUT:
[![Example of dom problem](https://i.stack.imgur.com/mJFQX.png)](https://i.stack.imgur.com/mJFQX.png)

What would be the best of getting around this while still using the `each` helper?

Answer: 
In your bi-order-card component add this line of code.

```
...
tagName: ''

```

This will cause the component to be tagless. The component would then render it's html as if it was not wrapped in the "ember-view" div. 

**EDIT:** The #each helper does not generate any html when it is iterating over the elements. It simply renders whatever is inside the block. Another possible solution is instead of making bi-order-card tagless, you could edit the bi-order-card component to be the flex item. This could be done by setting the tagName and the classes inside the component.js rather than in the template.
Here is a little example of a tagless component: <http://www.emberdaily.com/2016/08/31/67-tagless-component/>

As mentioned by the others, the each helper doesn't add any wrapping HTML.
If you use the tagless component, it's important that you can not use class, classNames, classNameBindings and attributeBindings in the components class.

Another option is to remove the outermost element of your card component template and use the wrapper element that gets created in components:

```
export default Component.extend({
    classNames: [ 'card__flipper' ]
})

```