Angular2 component tags break flexbox layout

Question

I'm building a front-end for a web app for a client in pure HTML5 & 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.

Here is an example of the problem:

Original layout: https://jsfiddle.net/starbreaker/jrqbhsuq/

HTML:

<div class="wrapper">

  <div class="child first">
    <h1>Some content</h1>
  </div>

  <div class="child second">
    <h1>Some more content</h1>
    <p>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
    </p>
    <p>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
      </p>
  </div>

</div>

CSS:

.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;
}

He wrapped first and second child divs in Angular2 component tags and got this: https://jsfiddle.net/starbreaker/1c15q243/

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.

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)."

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.

I found similar issue described here: Using flexbox with angular 2 components

Unfortunately I have zero experience with Angular and have no idea how to implement the solution from this question.

So, is it possible to fix this only in CSS/HTML somehow?

Later Edit:

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...

Answer 1

Your component has to be flex parent, so either you use styles/stylesUrl property in component decorator, or simply set styles for your component in css

// component decorator styles property
:host {
  display: flex;
}

// external css
your-component-selector {
  display: flex;
}

https://jsfiddle.net/1c15q243/2/