justify-content: center not working on angular component

user_9452722 0
Viewed 187

I want to stretch the child component. Why does this not work?

Parent Component

<app-tmp></app-tmp> is a component that I want to stretch but does not stretch, while the same code is not wrapped in component stretches.

<div style="width: 100%; display: flex; justify-content: stretch; flex-wrap: wrap; background-color: yellow">

            <p style="height: 50px; width: 100%; background-color: skyblue">This streches</p>

            <app-tmp></app-tmp>
</div>

app-tmp component code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tmp',
  template: `
    <p style="height: 50px; width: 100%; background-color: skyblue">
      This does not stretch
    </p>
  `,
  styleUrls: ['./tmp.component.scss']
})
export class TmpComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Other information

justify-content: flex-end, etc works, but only justify-content: stretch does not work.

How it looks like

enter image description here

angular
2 Answers

Angular components generate a stylesheet for styling of component. So put the styles in the stylesheet here it is tmp.component.scss

:host {
  height: 50px;
  width: 100%;
  background-color: skyblue
}

This is somewhat similar to @N.F. answer

user_144239840

Add this in your tmp.component.scss.

:host {
  width: 100%;
}
user_40528580
Related