Issue with Angular flex

I have got a basic flexbox grid. If I move the ngFor loop into a component (<comp-ngfor-testGrid></comp-ngfor-testGrid>) the flex is broken.

The <comp-ngfor-testGrid> on the DOM causes the issue. I would like to remove it and keep only the content of the component <comp-ngfor-testGrid>.

:host {} is not the solution because the <comp-ngfor-testGrid> still exist...

.grid {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  div {
    width: calc(50% - 10px);
    margin-bottom: 15px;
  }
}
testGrid = [4,5,6];

<div class="grid">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div *ngFor="let item of testGrid ">
    {{item}}
  </div>
  <comp-ngfor-testGrid></comp-ngfor-testGrid>
</div>