css - HTML tag wrapping screen (by default) + content (if overflows) -

i have learnt if want make webpage wrap content of webpage, should leave width property of html tag alone height adapt automatically content.

the problem that, in case, need content dynamic depends on how items have on webpage, webpage needs wrap of them.

if there enough items overflows 100% of screen of computer there not problem because webpage automatically adapts content when have less items 100% of screen of computer, adapts content html tag leaves space without covering it.

i in cases content more 100% of screen, webpage adapt , in cases content less 100%, html tag cover full screen(as if had set height: 100%;).

here examples:

• example 1: covering content. > ok.
• example 2. covering content, not full screen. > not ok.
• example 3. covering full screen when content less 100% screen. > ok.
• example 4. covering full screen not full content. > not ok.

notice example 1 , example 2 not have height: 100%; property , example 3 , example 4 have it.

how can set properties of css html tag cover both screen (by default) , content (if overflows)?

thanks in advance!

the best way use min-height vh unit:

#container{     display: flex;     min-height: 100vh;     background-color: blue; } 

jsfiddle

however, aware of vh browser support - caniuse , mdn.