Currently in my angular project, I have a basic header, main, footer structure and I want to transform the main-component into a flex-box so that all components are arranged horizontally with equal width. Moreover, I aim to switch the flex-direction to column when the screen width is less than 700px. I was able to accomplish this using pure HTML + CSS (check out the jsfiddle: http://jsfiddle.net/aJPw7/443/) which leads me to believe that it involves angular parent components.
Expected behavior: Both <app-content-section> elements should have 50% width of <app-main-component> and 100% height. Once the flex-direction changes to column, they should have 100% width and 50% height:
Current behavior: The <app-content-section> elements align as desired with "justify-content" but don't respond to any specified height or width attributes.
Style.css
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
app-root HTML:
<app-main-component>
<app-content-section></app-content-section>
<app-content-section></app-content-section>
</app-main-component>
app-main-component HTML:
<div class="main-component">
<ng-content></ng-content>
</div>
app-main-component CSS:
.main-component {
display: flex;
flex-direction: row;
height: 100%;
}
@media screen and (max-width: 700px) {
.main-component {
flex-direction: column;
}
}
app-content-section HTML:
<div class="content-section">
<a>Test</a>
</div>
app-content-section CSS:
.content-section {
width: 100%;
height: 100%;
}
Edit1: I also tried :host{ } but still no luck.
Edit2: I created another jsfiddle where I achieved the correct width by styling the host-element and adding flex: 1, yet the elements still do not utilize the entire height. https://jsfiddle.net/1c15q243/19/