Flexbox centering and scroll availability

You wrote a simple webpage.

There ain't no much content on it.
Iong enough to scroll on your phone,
but not enough to fill your computer screen.

You'd like to center those content.

So you came up with this:

html {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

Good, now it's center-ed on your computer, in both directions.

However, when you view that page on your phone again...

The top of your content is cut off!

However, since you are lucky enough to reach here...
don't panic, let me explain:

Instead of...

html {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

Try this...

html {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100%;
}

Note: Scroll availability on different direction can't be ensured by flexbox. For example, horzional scroll availability can't be ensured by flexbox with vertical direction.