Flexbox won't align child elements of parent vertically

I am currently facing an issue with my parent container div and its child elements. Even though one child element is being vertically centered, the other two child elements remain at the top of the page. I have been trying to troubleshoot this problem but haven't been able to pinpoint the mistake in my code.

html:

<div class="Container">
<div class="headerWrapper">
   <div> 
       <span>Information & Advice</span>
    </div>
    <div>
       <span>From the daylight experts</span> 
    </div>    
</div>
<div class="wrapper">
    <app-carousel></app-carousel>
    <app-guides></app-guides>
</div> 
<div class="instagramWrapper">
    <app-instagram></app-instagram>
</div>       

css:

  .Container {
    padding: 0;
    height: 100%;
    margin: 0;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;     
    flex-direction: row;
    width: 100%;
  }

  .wrapper {
    width: 780px;
    /* inherit parent width */
  }

  .instagramWrapper {
    width: 500px;
    padding-left: 10px;
    margin-left: 2px;
    /* inherit parent width */
  }

According to my knowledge, 'align-items' should align items in the cross axis of the current line of the flex container. However, this doesn't seem to be working as expected in my case.

https://i.sstatic.net/qOyxD.jpg

The updated result can be seen above.

Answer №1

It's possible that your container has a height of 100%, but have you checked if its parent also has a height set to 100%?

One solution to try is:

html, body {
    height: 100%;
}

By setting the document to have a height of 100% of the viewport, the .Container will then receive 100% of the document's height.

As a result, both inner Elements (instafeed and the left column) will be positioned differently based on their size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving the return value from an Angular HTTP POST request?

My current project involves developing an Angular frontend that will handle multiple HTTP POST requests. The data is sent to the backend, which then responds with a confirmation. While the first part of the process is working smoothly, I'm encounterin ...

Choose carefully when to utilize forkJoin

In a particular scenario, I need an application to generate menus based on specific contexts. Here are the definitions for menuA and menuB: // menuA example from a given source menuA() { return [ { a: 'demo1', b: &apo ...

Discovering a location on Google Maps using a postal code in a particular country

In the past, I used a method that involved adding a postal code to the end of a Google Maps link to view a specific location. For example, if the postal code is 649414, I would add it to the following link: https://www.google.com/maps?q=649414. However, I ...

Tips for addressing the issue of line height causing padding at the bottom of divs

I am facing an issue on my website where I need to create <div> elements that expand to display images and a title. My current approach involves a structure like this: <div class="thumb"> <img src="image_url"/> <div id="title" ...

Ensuring that the content fits perfectly inside a div using either Bootstrap or

I am facing an issue with two nested divs. One of them has a button that I want to stick to the bottom of the parent div, while the other contains text or a list of persons. The problem arises when the text is lengthy, causing it to overflow the div. I am ...

Utilize the content within an input field to perform a calculation and showcase the outcome in a separate element

Currently, my shopping cart displays a price, quantity, and subtotal field for each product. While the user can change the quantity field, the other fields remain static. I am looking for a method to automatically calculate the subtotal whenever the user ...

What methods can users employ to effectively manage and maintain their in-app purchases using my application?

Hey there, I could really use some assistance. Recently, I created a mobile app for a client that allows users to purchase and watch video courses. However, I'm facing an issue where when a user buys a course and then refreshes the app, they are redir ...

Tips for utilizing functions in an inline HTML translation pipe

My objective is to streamline the code by using the Angular translate pipe. Currently, I find myself using 8 curly brackets and repeating the word "translate" twice... there must be a more efficient approach. Here is my current code setup: <s ...

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

Ways to eliminate whitespace in React and Bootstrap 5

I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance? Here is how the page looks on PC: https://i.sstatic.n ...

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

Is it possible to incorporate a Node.js library into an HTML document?

I am working on an HTML file where I want to incorporate the nodemailer library to handle email sending. Although in nodejs, I can easily include var nodemailer = require('nodemailer') at the beginning of the script section of my HTML file, it ap ...

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div https://i.sstatic.net/g1eUd.gif Do you have any suggestions? Here is a snippet of my code: ...

Child routes in Angular tabs are failing to display in the currently active tab

Hey there! I'm currently working on navigating my Angular application using tabs, and I've run into a bit of an issue with the child routes. Specifically, when I switch to the second child route within the second tab, the status of the tab change ...

The ngrx action is mysteriously invoked without being explicitly called within the effect

I've implemented an effect to load data and defined actions for load success and load failure. The effect is functioning correctly, but it seems to be calling both actions (success and failure) even though I have only returned load success. When I tri ...

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

Encountering the issue of receiving "undefined" in node.js after submitting data from an Angular form

I am facing an issue where I am getting 'undefined' in the backend (node.js) when I submit data from angular forms, even though I have used body-parser to parse the incoming data. server.js const express= require("express"); const app= ...

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

Are you looking to use the 'any' type instead of the 'Object' type? Angular Services can help you with that

I encountered the following error message: Argument of type 'OperatorFunction<APISearch[], APISearch[]>' is not assignable to >parameter of type 'OperatorFunction<Object, APISearch[]>'. The 'Object' type is ...