CSS flex使って要素を下に押し下げる

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  margin-top: auto;
}

.footer を .wrapper の直下に含めること。あるいは、

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex-grow: 1;
}

.footer {
}

flex-grow で膨らませると残りの要素が押し出されて下端に移動する。

本ブログではサイドバーで使ってる。