Flexbox не будет вертикально центрировать дочерние элементы родителя

Question

У меня есть родительский контейнер div и некоторые дочерние элементы, однако только один дочерний элемент центрируется по вертикали. Я не могу понять, что я делаю неправильно. Instagramwrapper выравнивается по вертикали, но оболочка, содержащая два других дочерних элемента, остается в верхней части страницы.

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 */
  }

Насколько я понял, что 'align-items' может быть выровнен по поперечной оси текущей строки гибкого контейнера?

новый результат ^

Answer 1

Ваш контейнер может иметь высоту 100%. Но его родитель имеет высоту 100%?

попробуйте следующее:

html, body {
    height: 100%;
}

Это даст документу высоту 100% от области просмотра, так что .Container получит 100% документа.

И оба ваших внутренних элемента (instafeed и столбец слева) будут расположены по-разному, в зависимости от их размера.