удерживать первый элемент вертикально по центру, а следующие элементы следует ниже

Question

У меня есть три элемента, в настоящее время вертикально отцентрированных в контейнере с помощью flex:

<div class="parent">
    <div class="first">A</div>
    <div class="second">B</div>
    <div class="third">C</div>
</div>

с CSS:

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 800px;
}

выглядит как:

Я хотел бы изменить его так, чтобы первый элемент был центрирован вертикально, а остальные элементы следовали:

В идеале это можно сделать просто с помощью flex, но пока я не могу найти решение. Любая помощь с благодарностью.

Answer 1

Если вы можете изменить структуру HTML, это возможно: поместите второй и третий элементы в DIV-оболочку и поместите один в первый. Затем отцентрируйте первый (не обязательно с помощью flex - см. Ниже) и примените к нему position: relative и примените position: absolute и соответствующие настройки положения к обертке. Подробнее см. Фрагмент ниже.

.parent {
  height: 500px;
  border: 1px solid blue;
}

.first {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100px;
  width: 300px;
  background: #ccc;
}

.wrap1 {
  position: absolute;
  top: 100%;
  width: 100%;
  height: auto;
  border: 1px solid green;
}

.second {
  background: #eee;
  height: 50px;
}

.third {
  background: #aaa;
  height: 80px;
}

<div class="parent">
  <div class="first">A
    <div class="wrap1">
      <div class="second">B</div>
      <div class="third">C</div>
    </div>
  </div>
</div>

ДОПОЛНЕНИЕ: На самом деле это также возможно с flex:

.parent {
  height: 500px;
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.first {
  position:relative;
  height: 100px;
  width: 300px;
  background: #ccc;
}

.wrap1 {
  position: absolute;
  top: 100%;
  width: 100%;
  height: auto;
  border: 1px solid green;
}

.second {
  background: #eee;
  height: 50px;
}

.third {
  background: #aaa;
  height: 80px;
}

<div class="parent">
  <div class="first">A
    <div class="wrap1">
      <div class="second">B</div>
      <div class="third">C</div>
    </div>
  </div>
</div>

Answer 2

Если ваши элементы имеют фиксированный размер, вы можете сделать это с помощью div размер которого совпадает с первым элементом, и пусть следующие элементы просто переполняются.

.parent {
  height: 125px;
  background-color: palegreen;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-container,
.item {
  width: 200px;
  height: 30px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

.second {
 height: 50px;
}

<div class="parent">
  <div class="item-container">
    <div class="item first">A</div>
    <div class="item second">B</div>
    <div class="item third">C</div>
  </div>
</div>