コンテンツ量が少ない時にフッターが表示最下部へ張り付くCSS

コンテンツ量が少ない時にフッターをブラウザ最下部へ表示させたい場合、下記のように設定します。

HTML例

<html>
	<body>
		<div class="content">
			余分含め伸びる（伸びているように見える）
		</div>
		<div class="footer">
			フッター内容
		</div>
	</body>
</html>

CSS

html,
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
	margin-top: auto;
}

※CSSノーマライズ等は省略