title: Using flexbox with angular 2 components
body: <p>I want to update visual side(grid, colors) of my angular 2 application. Old layout was build with bootstrap 4, which I don't really need anymore. I decided to go for plain css3, and build grid with flexbox. <a href="http://codepen.io/Eggy/full/wKQrZE/">I made a preview of this grid on codepen</a>.</p>
  
  <p>However implementation in project is hard and I am now stuck. Let's consider an example:</p>
  
  <pre><code>import {Component} from 'angular2/angular2';
  
  
  @Component({
    selector: 'some-component',
    template: `
      &lt;aside class="col-4 main-aside"&gt;&lt;/aside&gt;
      &lt;section class="main-section center"&gt;&lt;/section&gt;
    `
  })
  export class SomeComponent { }
  </code></pre>
  
  <p>If I bootstrap this component within, for example <code>.container</code> I may get this result:</p>
  
  <pre><code>&lt;body&gt;
    &lt;!-- .container is flex parent --&gt;
    &lt;div class="container"&gt;
      &lt;some-component&gt;
        &lt;!-- .main-aside and .main-section should be flex children --&gt;
        &lt;aside class="main-aside"&gt;&lt;/aside&gt;
        &lt;section class="main-section center"&gt;&lt;/section&gt;
      &lt;/some-component&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>As you can see the flex chain parent -> child is broken because of component "selector" between them. I menaged to fix this by adding styles: <code>display: flex; width: 100%;</code> to component selector from chrome dev tools, however I don't know how to make this work from code perspective nor is it the best way to do so.</p>
  
  <p>I would really appreciate any help, because I have no idea how to fix this with the exception of not using flexbox.</p>
  
  <p>I am using angular 2.0.0-alpha.44</p>
  
  <p>And yes, I am aware of angular's alpha state.</p>