Flexbox Alignment implementing Nested Divs in Angular 13
I'm getting frustrated with I'm having trouble aligning nested divs using Flexbox in my Angular 13 application. I have a parent div that is set to display as flex, but the child divs do not seem to align as expected. Here's a simplified version of my code: ```html <div class="parent"> <div class="child-1">Child 1</div> <div class="child-2">Child 2</div> </div> ``` ```css .parent { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .child-1, .child-2 { width: 100px; height: 100px; margin: 10px; background-color: #009688; } ``` The parent div is supposed to center its children both vertically and horizontally, but instead, it aligns them at the top of the container. I’ve ensured that there are no conflicting styles from other CSS files, and I even tried using `flex-direction: column;` but that didn't solve the scenario either. When I inspect the elements, I see that the computed styles seem correct, but the children still appear aligned at the top. I also tried using `min-height: 100vh;` for the parent, but that didn’t change the behavior. Would anyone know why this could be happening? Is there a specific property or detail that I'm missing in my Flexbox setup? Any help would be appreciated! I'm on Windows 11 using the latest version of Html.