html - Flex布局无法正常使用ngFor循环

我搜寻了，但找不到像我一样的问题。抱歉，如果某个地方有答案。

我正在尝试以2个容器并排的行格式进行非常简单的flex布局。我有一个卡片组件，另一个组件内部有一个ngFor循环。这是我的代码：

top-cta-HTML：

<section id="cta-container">
  <h1>Take Control of Your Financial Future</h1>
  <h4>
    Whether you’re looking at annuities to guarantee future income, <br />save
    for a life change, or selling your structured settlement,<br />
    we’re here to help with guidance, advice, and experience
  </h4>
    <app-cta-card></app-cta-card>
</section>

top-cta-CSS：

#cta-container {
  margin: 2.5rem 0 0 auto;
  padding: 0 20px 0 5px;
  background-color: orange;
  width: 35%;
  border-bottom-left-radius: 60px;
  text-align: end;
}

#cta-container h1 {
  font-size: 2.75rem;
  font-weight: 900;
}

#cta-container h4 {
  margin-top: -20px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5em;
}

卡片HTML：

<article id="card-parent-container">
  <div class="top-cta-card" *ngFor="let card of ctaCards">
    <div class="cta-card-topper">1</div>
    <h3>{{ card.title }}</h3>
    <a href="#" class="top-cta-links">&#10132;</a>
    <p>{{ card.description }}</p>
  </div>
</article>

卡CSS：

.top-cta-card {
  background-color: var(--cream);
  width: 300px;
}

#card-parent-container {
  display: flex;
  flex-direction: column;
}

.cta-card-topper {
  background-color: var(--teal);
  height: 100%;
  width: 100%;
  color: var(--teal);
}

.top-cta-links {
  background-color: var(--teal);
  color: var(--cream);
  padding: 5px 6px;
  border-radius: 50%;
  box-shadow: 3px 2px 3px var(--gunMetal50);
}

这段代码产生了2张彼此叠放的卡片，无论我如何更改，它们都不会以行格式出现。

作为测试，我在没有ngFor循环的top-cta-HTML文件中做了2个div，并获得了预期的结果。关于我在做什么错的任何想法吗？

感谢您提供的所有帮助，我非常感谢！

最佳答案

所以问题是我的伸缩代码太深了一层。我最终将flex代码放在app-cta-card上，它可以按预期工作。

这是Stack Blitz代码：
https://stackblitz.com/edit/angular-6oxcmy