Снизу выровняйте 2 div внутри родительского div (сохраняя один дочерний div поверх другого дочернего)

Question

У меня есть 3 деления:

<div class="parent"> 
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>

CSS:

.parent {
  height: 500px;
  width: 500px;
  position: relative;
}

.child1, .child2 {
  height: 100px;
  width: 100px;
}

Мне нужно выровнять child2 div, чтобы быть в нижней части .parent div, в то время как child1 div должно быть на вершине child2 div.

Итак, и child1, и child2 должны быть выровнены снизу относительно родительского div, но child1 должен быть поверх child2.

Как мне этого добиться? Если есть только один дочерний div - это может быть достигнуто с помощью настройки position: absolute; bottom:0, но я не могу понять, есть ли 2 дочерних div, и один дочерний div должен быть поверх другого.

Answer 1

Вы можете использовать Flexbox на .parent и применять следующие стили:

.parent {
  /* Introduce Flexbox */
  display: flex;

  /* Establishes the y-axis as the main axis.
     This displays the children from top to bottom */
  flex-direction: column;

  /* Packs the children from the end of the main axis */
  justify-content: flex-end;
}

.parent {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid black;
}

.child1,
.child2 {
  height: 100px;
  width: 100px;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

<div class="parent">
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>