Flex align-items не работает с flex-wrap?

Альтернативное решение для этого с flex, используйте направление flex как столбец

div {
display: flex;
flex-direction:column;
justify-content: flex-end;
padding: 20px;
height: 300px;
background: #222;
flex-wrap: wrap;
}

Редактировать 1:

Я забыл упомянуть в исходном ответе о flex-wrap, что, когда он включен, элементы строки завернуты и создается многострочный flexbox. В том случае, когда вы выравниваете содержимое (я не упомянул элементы, так как вы хотите учитывать все элементы, а не только элементы, которые находятся в одной строке), вам нужно использовать align-content: flex-end.

Это упакует все многострочные элементы, встречающиеся в вашем гибком макете, в конце flexbox, а ваши элементы будут выровнены внизу.

Когда вы использовали align-items: flex-end, flexbox выравнивал элементы на основе строк, на которых был размещен элемент.

Когда вы использовали align-items: flex-end, элементы выравниваются в соответствии с их строкой.

Heading
--------- // line 1
Paragraph
--------- // line 2

А когда вы использовали align-content: flex-end, строки перемещаются вниз.

Heading
Paragraph
--------- // multi lines are packed at the end of the flexbox

Вот рабочий пример для вас:

body { margin: 0; padding: 0; }

div {
  display: flex;
  align-content: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
  flex-wrap: wrap;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

<div>
  <h1>Header something something something header more of header and more and more</h1>
  <p>Just some content at the end of the div not sure what more to write</p>
</div>

https://jsfiddle.net/h9ykz0ue/

В вашем коде действительно нет проблем. Я бы рекомендовал вам использовать align-items: flex-end; вместо align-items: end; в вашем гибком контейнере.

Проблема, с которой вы сталкиваетесь здесь, - это маржа. И <h1>, и <p> имеют свои поля.

Так как эти элементы рендерятся рядом из-за гибкой компоновки (но визуально они расположены вертикально, благодаря flex-wrap). Также свертывание полей не отображается в вашем макете, поскольку оно не поддерживается в гибких макетах, оно появляется только в блочных макетах.

Я бы порекомендовал вам вместо flex-wrap: wrap использовать flex-direction: column с justify-content: flex-end следующим образом:

div {
  .
  .
  flex-direction: column;
  justify-content: flex-end;
  .
  .
}

Вот краткая демонстрация того, о чем я говорил:

body {
  margin: 0;
  padding: 0;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

p {
  margin: 0;
}

<div>
  <h1>Header something something something header more of header and more and more</h1>
  <p>Just some content at the end of the div not sure what more to write</p>
</div>

Здесь я также удалил поле <p>, чтобы <h1> было ближе к нему. Если не нужно, вы можете удалить стиль.