Как заставить флекс-элемент «выпирать» из флекс-контейнера?

Question

[Azamat_TURBO]

Суть такова: нужно чтобы флекс-контейнер был 70px высотой. Флекс-блок внутри должен быть 100px высотой и как бы "выпирать" на 30px из контейнера, не растягивая его под свою высоту.
Из возможных вариантов была мысль использовать position: absolute, но ничего толком не вышло.

Как мне модифицировать, например такой код, чтобы получилось реализовать задуманное?
https://codepen.io/Azamat_TURBO/pen/BXmMjq?editors=1100

Answer 1

[fallus]

Дать блоку
margin-bottom: -30px;
или
margin-top: -30px;

Answer 2

[Рома Зварич]

Azamat_TURBO,

1) в описании проблемы Вы указываете, что высота контейнера 70px, а в коде ему задана высота 100px.

2) Вы не указали, куда должен выступать дочерний элемент (в какую сторону). В примерах рассмотрю вариант, при котором элемент выступает вниз.

Пример №1 (относительное позиционирование):
Дочернему элементу задать

position: relative;
  top: 30px;

https://codepen.io/hisbvdis/pen/xvPBGW?editors=1100

Пример №2 (трансформация):
Дочернему элементу задать
transform: translateY(30px);
https://codepen.io/hisbvdis/pen/bXYZEV?editors=1100

Пример №3 (абсолютное позиционирование):
Родителю
position: relative;
Дочернему

position: absolute;
  top: 30px;

https://codepen.io/hisbvdis/pen/bXYZEV?editors=1100