Why doesn't the align-items:end property work?

Question

css

The content of the message_block container is still displayed at the top:

<div id="message_block">
  <p>Привет</p>
</div>

#message_block{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height:100%;
  padding:5%;
  box-sizing: border-box;
}

Answer 1

https://codepen.io/topicstarter/pen/VwvpeVq