title: Angular2 component tags break flexbox layout
body: <p>I'm building a front-end for a web app for a client in pure HTML5 &amp; CSS3 and using flexbox for layout. I completed the first page and send it to the client. He wrapped some code in Angular2 component tags and the layout broke.</p>
  
  <p>Here is an example of the problem:</p>
  
  <p>Original layout: <a href="https://jsfiddle.net/starbreaker/jrqbhsuq/" rel="noreferrer">https://jsfiddle.net/starbreaker/jrqbhsuq/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
    &lt;div class="child first"&gt;
      &lt;h1&gt;Some content&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="child second"&gt;
      &lt;h1&gt;Some more content&lt;/h1&gt;
      &lt;p&gt;Help me if you can, I'm feeling down
         And I do appreciate you being 'round
         Help me get my feet back on the ground
         Won't you please, please help me
      &lt;/p&gt;
      &lt;p&gt;When I was younger so much younger than today
         I never needed anybody's help in any way
         (But) But now these days are gone (These days are gone), I'm not so self assured
         (I know I've found) Now I find I've changed my mind and opened up the doors
        &lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
    display: flex;
  }
  
  .child {
    background-color: yellow;
    padding: 0 1em;
    flex: 1;
  }
  
  .first {
    display: flex;
    align-items: center;
    background-color: #F6CEF5;
  }
  
  .second {
    background-color: #CEF6CE;
  }
  </code></pre>
  
  <p>He wrapped first and second child divs in Angular2 component tags and got this:
  <a href="https://jsfiddle.net/starbreaker/1c15q243/" rel="noreferrer">https://jsfiddle.net/starbreaker/1c15q243/</a></p>
  
  <p>I understand what has happened - these newly added Angular2 tags became flex-items instead of the original tags and spoiled everything. The client says that "these angular tags are ignored by the browser", but it's obviously not the case here. </p>
  
  <p>He also says that "I am not fully in control of what extra tags get inserted. Thus the design/css must be able to cope with extra non-html elements (that the browser normally just ignore)."</p>
  
  <p>I tried to apply inline-styles to these new Angular tags (basically adding styles from the divs to them) and it fixes the problem, but it's obviously not a very good solution and not extensible.</p>
  
  <p>I found similar issue described here: <a href="https://stackoverflow.com/questions/33654980/using-flexbox-with-angular-2-components">Using flexbox with angular 2 components</a></p>
  
  <p>Unfortunately I have zero experience with Angular and have no idea how to implement the solution from this question.</p>
  
  <p>So, is it possible to fix this only in CSS/HTML somehow?</p>
  
  <p><strong>Later Edit:</strong></p>
  
  <p>I use flexbox in many places with different css properties, and don't know beforehand what Angular tags will be inserted and where, so restyling them all in CSS doesn't seem like a good solution...</p>