title: Ho to layout with flexbox with angular's isolated css
body: <p>Given following sample html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset=" utf-8 "&gt;
      &lt;title&gt;AngularFlex&lt;/title&gt;
      &lt;meta name="viewport " content="width=device-width, initial-scale=1 "&gt;
  &lt;/head&gt;
  
  &lt;body style="display: flex;"&gt;
      &lt;div style="background: red; height: 100px; flex:1 "&gt;&lt;/div&gt;
      &lt;div style="background: green; height: 100px; flex:2 "&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Result:</strong>
  <a href="https://i.stack.imgur.com/YbSR2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YbSR2.png" alt="Wanted layout without angular"></a></p>
  
  <p>Now I want to achieve this layout with Angular and multiple components. Following  html is generated by angular:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;AngularFlex&lt;/title&gt;
      &lt;base href="/"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body style="display: flex;"&gt;
      &lt;app-root&gt;
          &lt;app-component1&gt;
              &lt;div style="background: red; height: 100px; width: 100px; flex:1"&gt;&lt;/div&gt;
          &lt;/app-component1&gt;
          &lt;app-component2&gt;
              &lt;div style="background: green; height: 100px; width: 100px; flex:2"&gt;&lt;/div&gt;
          &lt;/app-component2&gt;
      &lt;/app-root&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Result:</strong>
  <a href="https://i.stack.imgur.com/vgN0Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vgN0Y.png" alt="Broken layout in angular"></a></p>
  
  <p>As you can see, the layout is broken since angular adds an extra html node for each component and is isolating the component's CSS.</p>
  
  <p>I know there are different approaches to solve this problem:</p>
  
  <ol>
  <li>Use global style and add CSS to the angular-generated html nodes</li>
  <li>Use the :host selector in any child component to style the generated node</li>
  </ol>
  
  <p>However, I was wondering which is really the best practice for big projects? How to use flexbox from scratch in Angluar without pain?</p>