CSS высота требуется при использовании flexbox с соотношением сторон

Question

Размеры полей в примере соответствуют соотношению сторон (часть padding-bottom). Но я должен поставить height: 100%, чтобы получить текст по центру. Я обычно не должен делать это при использовании flexbox с align-items: center. Почему height необходим в этом случае?

Во втором окне я пытаюсь извлечь height в новый элемент и обернуть основной контент внутри него, но затем центрирование не работает. Это почему? Я не хочу, чтобы height был на элементе, который включен, потому что он должен go на более высоком уровне, чтобы я мог извлечь шаблон для использования для аспекта rat ios в целом. Если height должен быть на элементе, на котором он включен, тогда мне нужно будет добавить height везде, где я использую шаблон.

<div style="width: 200px; background-color: blue">
  <div style="position: relative; padding-bottom: 50%;">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
      <div style="display: flex; align-items: center; justify-content: center; height: 100%">
        <div>text</div>
      </div>
    </div>
  </div>
</div>

<div style="width: 200px; background-color: green">
  <div style="position: relative; padding-bottom: 50%;">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
      <div style="height: 100%">
        <div style="display: flex; align-items: center; justify-content: center">
          <div>text</div>
        </div>
      </div>
    </div>
  </div>
</div>