CSS layout, flexbox

Question

The "red" div (seen in the image) is in the "head" div. I'm using flexbox to positioning simply like that:

#head {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

I want to overflow the red to the gray area like in the picture. How can I do that?

Answer 1

Apply one of these rules

#red {
  transform: translateY(50%);
}

or

#red {
  position: relative;
  top: 50px;
}