Flex Layout Not Working as Intended With ngFor Loop

Question

I searched but couldn't find a question quite like mine. Apologies if there's an answer somewhere.

I'm attempting to do a very simple flex layout in row format where 2 containers are side by side. I have a card component with an ngFor loop inside another component. Here's my code:

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

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

card-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);
}

This code produces 2 cards stacked on top of each other and no matter what I change they won't sit in row format.

As a test, I made 2 divs inside the top-cta-HTML file with no ngFor loop and got the desired result. Any ideas here on what I'm doing wrong?

Thank you for any and all help, I really appreciate it!

if you want a row you should use flex-direction: row, which is the default so you could just omit it — zgood
@zgood that's what I did initially and it had no effect on the layout — Jonathan Sexton
@MustafaKunwa I can do that when I get home today, is there a way to import files or do I need to just copy/paste? Sorry never used Stack Blitz before — Jonathan Sexton
@MustafaKunwa here is a link to the stack blitz editor stackblitz.com/edit/angular-yogk3e I've also tried putting the flex code in app.component.css but that doesn't produce the desired result either Thank you for any and all help you may be able to provide :) — Jonathan Sexton

Jonathan Sexton Jonathan Sexton · Accepted Answer · 2020-01-17T01:35:00

So the issue was that my flex code was one layer too deep. I ended up putting the flex code on app-cta-card it the flex works as intended.

Here's the Stack Blitz code: https://stackblitz.com/edit/angular-6oxcmy

Flex Layout Not Working as Intended With ngFor Loop

1 Answers