Как я могу прикрепить элемент к нижней части div с помощью flexbox?

Question

У меня проблемы с тем, чтобы элемент прикреплялся к нижней части элемента div с помощью flexbox или любым другим способом, который работает хорошо.

Пока я пробовал:

1. добавление поля сверху: авто;к последнему div
2. добавление margin-bottom: auto;к тегу p над последним div
3. align-self: flex-end;до последнего div
4. позиция: абсолютная;низ: 0;до последнего div
5. переключение на css grid
6. , оборачивая нужные элементы в верхней части контейнера в свои собственные div
7. align-self для каждого элемента в отдельности
8. высота: 100%;на тег p над последним div

.outer-div {
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
  border: 3px solid black;
  width: 100%;
  height: 100vh
}

.element {
  margin: 0px auto 0px 0px;
  align-self: baseline;
}

.par {
  flex: 100%
}

.buttons {
  flex: 100% margin: auto 0px 0px 0px;
}

<div class="outer-div">
  <p class="element" href="">element</p>
  <small class="other-element">element</small>
  <p class="par">word</p>
  <div class="buttons">
    <button>button 1</button>
    <button>button 2</button>
  </div>
</div>

1. любое поле, которое было там с самого начала, свернуто
2. любое поле, которое было с самого начала, свернуто
3. ничего не сделал
4. это почти сработало, но охватывало часть контента.
5. выталкивает часть содержимого за пределы div.
6. ничего не изменилось.
7. тег p не растянется полностью.
8. выдвинул последний элемент за пределы div.

Answer 1

Переключитесь на flex-direction: column, чтобы главная ось была вертикальной, и используйте margin-top: auto на кнопках.

.outer-div {
  display: flex;
  flex-direction: column;
  height: 100vh
}

.buttons {
  margin-top: auto;
}

body {
  margin: 0;
}

<div class="outer-div">
  <p class="element" href="">element</p>
  <small class="other-element">element</small>
  <p class="par">word</p>
  <div class="buttons">
    <button>button 1</button>
    <button>button 2</button>
  </div>
</div>