html code:
<div id = "app">
<div id = "container">
<div id = "header">Header</div>
<main id ="main-container">
<p>lots of text</p>
</main>
<div id = "footer">Footer</div>
</div>
</div>
css:
#header {
background-color: blue;
}
#footer {
background-color: red;
}
#container {
background-color: #2E3243;
display: flex;
flex-direction: column;
height: 100vh;
min-height: 100vh;
color: white;
min-width: 100vw;
}
#main-container {
display: flex;
flex: 1 1 0%;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
justify-content: center;
}
How it looks with few text:
with a lot of text:
https://jsfiddle.net/3jtxhaq7/
I'm not sure how to fix it...
CodePudding user response：
This is the code pen to remove x scroll https://codepen.io/ash_000001/pen/rNYJeVM
#header {
background-color: blue;
}
#footer {
background-color: red;
}
#container {
background-color: #2E3243;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
min-width: 100vw;
}
#main-container {
display: flex;
flex: 1 1 0%;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
justify-content: center;
}<div id = "app">
<div id = "container">
<div id = "header">Header</div>
<main id ="main-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam leo ac ex semper dignissim quis vitae mauris. Ut ultricies elit ut nunc finibus interdum. Mauris ut pulvinar enim, id aliquet tellus. Aenean sed odio euismod, auctor orci rutrum, lobortis urna. Pellentesque et accumsan est. Quisque interdum condimentum quam dignissim molestie. Duis volutpat lorem eu ipsum aliquet, sed luctus orci malesuada. Nulla facilisi. Quisque ultrices, libero ac elementum mattis, lacus ligula lacinia justo, at imperdiet sem augue a neque. Donec sed nisl lacus. Nam quis urna ac nisl luctus congue. Suspendisse efficitur justo eu urna lacinia, in euismod augue fermentum. Pellentesque facilisis tortor ligula, ac convallis leo blandit eu. Donec malesuada nunc in felis aliquam accumsan.
In ac mi metus. Nam volutpat nec lacus in interdum. Proin tincidunt id erat eget lobortis. Nulla odio nisi, elementum vel metus quis, gravida pellentesque turpis. Aliquam pretium diam ut dapibus vestibulum. Integer maximus vulputate dapibus. Nam id porta dui. Aliquam vel dictum odio, eget elementum magna. Aliquam ut lacus a diam convallis porttitor. Maecenas eleifend non lorem tincidunt interdum. Sed id nisl sem.
Nullam eu suscipit dui. Praesent rhoncus augue arcu, ut pharetra tortor blandit nec. Vestibulum imperdiet, velit interdum ultricies accumsan, odio purus dictum urna, non rutrum augue nulla quis turpis. Aliquam congue pretium purus, accumsan euismod risus efficitur a. Phasellus dapibus bibendum libero, ut laoreet tortor euismod quis. Suspendisse tempus sit amet velit eu consequat. Curabitur blandit ante a nulla ultricies, eget ornare velit placerat. Aliquam at venenatis dui. Nulla ornare, neque quis cursus consectetur, turpis mauris auctor enim, eu bibendum tellus odio eget augue.
Donec suscipit ornare molestie. Aenean fermentum, elit nec tempus faucibus, quam mauris consectetur urna, vel elementum odio orci laoreet lectus. Suspendisse ornare ante quis accumsan tristique. Aliquam erat ipsum, venenatis sit amet dignissim eget, dapibus in ligula. Quisque urna velit, vehicula eu ligula a, tristique varius augue. Mauris mi ipsum, volutpat sed urna in, iaculis bibendum odio. Praesent rhoncus ex non orci ornare, ut malesuada urna dapibus.
Phasellus in euismod risus. Nullam sit amet dolor nec risus tempor congue sed at ex. Cras non cursus elit. Donec non ante non enim blandit eleifend. In iaculis lorem non turpis vehicula dignissim. Phasellus leo felis, pellentesque at molestie ac, fermentum a lectus. Etiam vel lacinia mi. Suspendisse consequat efficitur imperdiet. Suspendisse scelerisque ligula est, quis mattis magna vehicula vel. Suspendisse potenti. Praesent scelerisque, sem sed ultricies congue, nunc metus tristique nisi, id rutrum mauris diam vitae sapien.
Etiam consectetur condimentum venenatis. Nunc tincidunt libero id sapien blandit tristique. Nunc malesuada est et diam viverra, sit amet fermentum lacus lobortis. Donec sed dui metus. Donec bibendum finibus justo, vel fringilla diam consequat vitae. Donec tincidunt viverra purus, id tincidunt lacus varius et. Nam eleifend rhoncus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pulvinar ipsum nec augue aliquam, vel efficitur eros venenatis. Donec commodo condimentum placerat. Nullam finibus ipsum quis scelerisque tincidunt. Morbi turpis tellus, consectetur in velit et, fringilla fermentum dolor. Phasellus mattis, elit vitae vulputate tincidunt, leo mauris bibendum lacus, a mattis nibh ipsum quis tortor. In feugiat pretium magna sit amet fringilla.
Praesent fermentum arcu lectus, non feugiat massa ultricies consectetur. Fusce est nisi, posuere nec mauris et, egestas consectetur felis. Vivamus eget massa mauris. Sed id congue elit. Integer scelerisque libero vel nisi commodo luctus. Integer pretium, velit sed maximus pretium, purus libero vestibulum lacus, quis molestie est ligula at ipsum. Vivamus quis orci tincidunt, venenatis nulla at, mattis ipsum. Nunc non ante aliquam, iaculis eros ut, commodo justo. Phasellus elementum libero vitae condimentum aliquam. Sed pretium consectetur ornare. Sed suscipit mauris odio, ut dignissim mauris consectetur eget. Donec ac lectus est. Ut porta turpis eget purus sollicitudin suscipit et eu sapien. Proin ultrices elit a orci lobortis porta.
Ut lorem enim, ultrices a lacus in, suscipit sodales lectus. Donec fringilla vehicula justo a placerat. Cras at turpis et elit porttitor mollis eu in sapien. Nam fringilla pretium venenatis. In in maximus augue, pellentesque ultricies odio. Proin vitae dolor vel libero consequat efficitur. Nam fringilla sapien eros, eu pretium ante finibus id. Ut egestas pellentesque dui, ut interdum ante euismod sit amet. Vivamus dictum pretium nisi. Phasellus non porttitor est. Nam in nibh sed ex mattis gravida. Vestibulum orci orci, laoreet in porttitor in, fermentum in quam. Sed lacinia porta metus, a lobortis erat lobortis in. Pellentesque consectetur non arcu nec malesuada.
Vestibulum eu nulla et neque aliquet vehicula et vitae nulla. Morbi consectetur, lorem eu commodo ullamcorper, nibh augue aliquam mi, eu tempor mi velit eget nisl. Suspendisse commodo, elit ac maximus mattis, orci ex aliquam elit, et bibendum arcu nunc sit amet libero. Vivamus turpis est, sagittis sed suscipit ut, pretium non lectus. Donec eget lacus turpis. Praesent semper ante mauris, ac volutpat dolor ultricies non. Suspendisse porta ante at diam tristique sagittis. Fusce sed orci eu tortor convallis congue. Nam ac ipsum orci. Ut ac erat at erat bibendum dignissim.
Sed luctus luctus mattis. Morbi gravida maximus faucibus. Nullam faucibus libero vel ligula porta mattis. Nunc diam turpis, vehicula ut varius nec, egestas a nisl. Suspendisse vitae lacus ut mi congue vestibulum. Curabitur vulputate non nisl a vulputate. Phasellus et euismod quam, et laoreet nunc. Duis eleifend lectus mauris, et commodo quam semper in. Nullam libero arcu, efficitur ut malesuada vel, elementum quis urna. Pellentesque euismod tempor euismod.
Cras nisi lectus, blandit at dui id, aliquam rhoncus ipsum. Donec vitae tortor vel nisi molestie finibus et vel velit. Nunc et felis libero. Aenean aliquet nibh eu enim auctor condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Morbi nunc felis, euismod ac libero non, posuere scelerisque arcu. Pellentesque sit amet feugiat diam. Maecenas non interdum dolor, eu lacinia risus. Vestibulum blandit neque a augue viverra congue. In vel enim eu mi venenatis mattis.
Quisque laoreet, magna non placerat varius, neque nibh hendrerit sem, eget pharetra mauris purus vitae sem. Duis quis convallis diam. Ut ac mi orci. Quisque accumsan tincidunt mauris maximus efficitur. Integer sed nunc lectus. Sed dapibus venenatis justo, at tincidunt quam lacinia ut. Morbi arcu lectus, ornare quis lobortis nec, imperdiet at dolor. Phasellus elementum vitae turpis eu finibus. Aliquam erat volutpat. Aliquam dapibus dignissim ex, elementum varius lorem scelerisque ac. Integer dictum pretium molestie. Duis mattis dictum erat, quis volutpat nisi maximus eu. Pellentesque et libero lectus. Sed a massa massa.
Proin rutrum sem lobortis dignissim feugiat. Sed ultrices nunc magna, vitae auctor quam tempus in. Praesent eros purus, placerat eu vehicula eu, imperdiet vitae turpis. Nunc at quam pharetra justo varius facilisis sit amet sed leo. Maecenas vehicula est tellus, at laoreet nisi tincidunt dapibus. Quisque faucibus sapien consectetur turpis dapibus faucibus. Aenean fermentum vel orci vel rutrum. Nunc ac ullamcorper lacus, id venenatis ligula. Quisque nunc tortor, facilisis et ligula et, porta ornare turpis. Aliquam tristique justo elit, sit amet efficitur ante malesuada sit amet.
Phasellus mattis dui ut semper congue. Morbi quam tellus, faucibus a sollicitudin in, accumsan non enim. Aliquam imperdiet accumsan orci nec varius. Sed at augue leo. Duis scelerisque magna ligula, ut pharetra dui porttitor eget. Proin malesuada, urna convallis ultricies convallis, orci justo dictum nisl, id sodales dui eros vel odio. Praesent ullamcorper neque sit amet risus pulvinar tempus. Mauris ac consectetur tellus, sed sollicitudin tortor. Vestibulum vitae congue urna. Vivamus quis suscipit elit.
Vestibulum facilisis dui sit amet venenatis molestie. In viverra pellentesque euismod. Vivamus molestie facilisis mi eu placerat. Donec eu efficitur dolor. Duis turpis tellus, maximus elementum lacus et, cursus pulvinar mauris. Vivamus ornare lobortis augue, ut posuere odio feugiat at. Sed auctor velit ac tortor dapibus, vel convallis risus maximus. Nulla quis eros at metus iaculis iaculis et a lacus.
Fusce faucibus viverra venenatis. Aliquam sit amet posuere massa. Nulla facilisi. Nulla commodo nunc massa, in finibus diam dignissim aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia pellentesque neque, non iaculis felis eleifend et. Pellentesque fringilla sapien non malesuada euismod. Nulla rhoncus mattis ultrices. Pellentesque tincidunt ante in metus sagittis, eu malesuada turpis vehicula. Fusce laoreet imperdiet dolor, nec tincidunt dui vehicula ac. Pellentesque a posuere dolor, vitae pharetra massa. Morbi in nunc condimentum, ornare est non, blandit arcu. Nullam iaculis tempor leo eget varius.
Nam sed mauris et felis pharetra varius sed eu urna. Ut a metus turpis. Sed eu elementum nulla, eu fermentum metus. Curabitur a maximus erat. Ut dignissim nunc et vestibulum tincidunt. Vivamus at convallis mi. Nullam a suscipit lorem, et facilisis ipsum. Nulla quis commodo augue, scelerisque consectetur eros. Etiam eros quam, euismod a dapibus vel, dapibus at eros.
Etiam sed nulla justo. Nunc accumsan accumsan vestibulum. Suspendisse accumsan eros tincidunt dui tristique, nec tincidunt massa mattis. Ut congue egestas eros ac sodales. In feugiat, nisi sed accumsan semper, ante nibh elementum nisi, quis pulvinar ligula enim vitae ipsum. Pellentesque fermentum, nisi dictum aliquet condimentum, diam leo ornare dolor, a interdum augue magna id diam. Mauris facilisis erat eget mi sodales, in auctor sem faucibus. Proin a imperdiet tortor. Sed iaculis pretium risus, at blandit orci maximus non. Nulla tempor tempus nisl. Nulla a pharetra ipsum.
Quisque feugiat viverra mi, vel pharetra lacus accumsan a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque turpis elit, gravida nec risus a, pretium euismod dolor. Duis ut risus ut diam egestas aliquet ac ut tellus. Nunc porta magna orci. Morbi faucibus quam condimentum, placerat quam id, auctor diam. Donec finibus arcu at ipsum aliquam, sed faucibus enim ultricies. Cras placerat consectetur tempus. Duis dapibus sed lorem at efficitur. Donec feugiat vestibulum nisl, eu tempus turpis scelerisque a. Etiam elit libero, porta porta ex id, tempus convallis turpis. Ut eget metus eget lacus viverra tincidunt quis pharetra metus. Pellentesque at egestas nibh. Mauris mauris libero, molestie nec venenatis sed, facilisis in tellus. Morbi non porta sem.
Phasellus hendrerit erat a quam semper tincidunt. Nam id dignissim orci. Donec tristique mi id felis mollis, sit amet tempus elit rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec molestie elit tortor, nec porttitor erat volutpat eget. Donec a rutrum mauris. Aliquam erat volutpat. Sed pellentesque tellus et varius suscipit. Morbi lacinia turpis est, et consequat turpis fringilla rutrum. Donec consectetur pulvinar odio, sed semper orci feugiat non.
Nulla porta rutrum sodales. Sed eu interdum lectus. Curabitur id lorem et tellus feugiat aliquam porta eget mi. Proin porttitor, velit non gravida ornare, mi nisl mattis risus, sed tempor erat libero ut tortor. Integer dignissim aliquam tellus, ac semper lectus viverra non. In eget enim turpis. Integer sit amet enim vitae nulla aliquet consectetur ac non urna. Donec rhoncus est non mi accumsan, nec tempus ex egestas. Donec volutpat malesuada mauris, ac lacinia velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse lobortis ligula sed accumsan ultricies.
In hac habitasse platea dictumst. Suspendisse eget varius erat. Cras leo ipsum, facilisis at sapien in, maximus gravida ipsum. Aenean rutrum commodo urna in auctor. Nam non finibus orci. Phasellus nec elit non magna malesuada viverra et eget risus. In sodales ante tellus, in rutrum ipsum blandit vitae. Duis nisl purus, semper vitae ex id, imperdiet hendrerit lorem. Integer venenatis vehicula nulla vitae mattis. Vestibulum non porttitor odio, eget finibus velit. Vivamus et dapibus tortor, ac vehicula sapien. Etiam quis lacinia est, sit amet fringilla lacus.
Sed posuere, odio a tempor scelerisque, neque lorem vestibulum lorem, nec ullamcorper justo elit vitae mi. Nam eleifend lacinia facilisis. Vivamus fermentum lobortis est non pharetra. In dignissim ante ac augue placerat pharetra. Vivamus pulvinar tortor sed accumsan mollis. Donec accumsan ligula eget orci pellentesque vehicula. Nunc tincidunt iaculis mi, et suscipit sapien condimentum ac. Integer elementum, lectus et bibendum tincidunt, ex magna tincidunt turpis, vel bibendum lorem sem ac lectus. Pellentesque a justo faucibus, venenatis ex id, suscipit nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque malesuada vitae turpis tempor commodo.
Sed vitae tortor nulla. Nullam iaculis dui augue, efficitur ornare purus consequat nec. Nullam interdum nunc a ante placerat, quis condimentum lacus consequat. Donec pretium commodo elementum. Nulla sodales, dolor vel imperdiet dictum, dolor sapien mattis lorem, sit amet interdum tortor elit ac nulla. Vivamus blandit ac risus sit amet mollis. Praesent dictum, ex sit amet lobortis eleifend, eros est iaculis velit, vitae egestas neque felis at est. Aenean lacus lectus, placerat vitae vehicula id, consequat at urna. In aliquet porttitor interdum. Mauris pretium laoreet sapien. Donec in lorem malesuada, feugiat ex in, aliquet urna.
Duis condimentum ornare elit sit amet suscipit. Sed malesuada mattis orci, ac vehicula lorem mattis in. Mauris pellentesque quis est quis dignissim. Curabitur quis eros quam. Nam velit sapien, dapibus eget ipsum quis, ultricies pellentesque orci. Aliquam dignissim velit ac dolor finibus, sit amet maximus mi dapibus. Duis maximus, odio nec varius faucibus, urna arcu porttitor quam, at hendrerit mi sem eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras fermentum tortor sem, nec bibendum tellus consequat eget. Donec suscipit rutrum sem, vel facilisis diam fringilla at. Aenean eleifend commodo porttitor. Ut nec pretium nulla, eget consequat tortor. Fusce scelerisque mi at mollis interdum. Pellentesque non lacus nisl. Cras fermentum enim nulla, eget rhoncus risus sodales in.
Morbi vulputate maximus consectetur. Duis consectetur erat a massa porta, eu bibendum risus rutrum. Phasellus tincidunt commodo sem a scelerisque. Maecenas rhoncus ligula sit amet fringilla imperdiet. Aliquam mollis quis metus dictum pretium. Sed finibus porta leo vel volutpat. Praesent gravida id mauris non hendrerit. Curabitur erat metus, lacinia ut est vel, auctor mollis massa.
Nam ultricies est in felis commodo pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque lacus nibh, pulvinar nec lacus ut, egestas tempus nisi. Nullam sit amet ex quis quam fringilla vulputate sit amet quis eros. Mauris aliquet magna quis ornare fermentum. Etiam ut urna ac lacus mattis molestie vitae eget nulla. Mauris mollis tincidunt congue. Pellentesque ullamcorper quam nec felis porttitor aliquet.
Sed pharetra iaculis erat eget porttitor. Vivamus odio libero, consequat sed hendrerit ut, tristique in nunc. Sed ultricies ut justo id imperdiet. Quisque risus orci, sagittis non ipsum et, lobortis tristique nunc. Proin lacinia justo leo, quis tempor risus scelerisque sagittis. Duis id tempus ligula. Mauris tincidunt neque quis purus varius accumsan. Etiam dictum, lectus in gravida fringilla, velit ex bibendum urna, mollis imperdiet nulla augue et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Pellentesque pharetra lorem ut facilisis placerat. Curabitur efficitur risus augue, quis mattis mauris eleifend vel. Proin imperdiet ligula justo, a convallis ex semper eu. Aenean volutpat magna vitae nunc dictum, nec varius dolor sagittis. Mauris posuere sem a aliquam rhoncus. Maecenas vel orci quam. Maecenas et lorem et sem vehicula molestie ornare blandit urna. Maecenas ut malesuada eros, et efficitur lacus.
Phasellus pharetra velit quis turpis dapibus convallis. Proin venenatis purus quis dui viverra, sed tincidunt risus pretium. Nam leo nulla, pretium in orci quis, malesuada pretium mauris. Curabitur tristique tortor id sagittis gravida. Phasellus egestas auctor est rutrum blandit. Donec sagittis, erat in consectetur feugiat, massa lorem ullamcorper lacus, non molestie mi felis eget ex. Quisque eleifend dapibus nibh vel aliquam. Nam ex magna, eleifend vel risus sodales, venenatis suscipit massa. Aliquam erat volutpat. Vestibulum ornare nec nulla sit amet vehicula. Fusce a vestibulum nisi. Fusce at porttitor odio, eu gravida arcu. Suspendisse eget porttitor magna, vitae blandit sem. Maecenas ultricies eros leo, non varius sapien euismod at. Fusce eget leo dolor.
Nullam tristique tellus a leo mattis, vitae tincidunt nibh congue. Sed malesuada laoreet dapibus. Proin ultrices, erat eu bibendum laoreet, risus tortor viverra leo, cursus mattis est ligula non velit. Phasellus dignissim orci ut sem ultricies, sit amet laoreet magna pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque vitae quam at mi viverra rutrum in at dolor. Sed pharetra fermentum egestas. Curabitur et ante id dui vehicula facilisis id sollicitudin odio. Phasellus imperdiet dolor augue, in pellentesque libero tincidunt et. Nullam rhoncus nunc scelerisque commodo iaculis. Aliquam arcu neque, pretium sit amet rhoncus id, congue ullamcorper nulla. Nam sapien ipsum, luctus sed condimentum nec, tempor vitae augue. Duis ullamcorper egestas dolor, sed rutrum libero sodales sit amet.
Duis placerat ligula condimentum orci ultrices, rutrum finibus diam vulputate. Sed quis ex non justo consequat porta. Vivamus molestie dapibus maximus. Aenean euismod condimentum ipsum id gravida. Aliquam in enim tincidunt, laoreet lectus vel, lacinia lacus. Nam ut dui dapibus, consectetur leo ut, fringilla libero. Sed sagittis, velit ut rutrum rutrum, elit velit elementum nisi, vitae eleifend mauris quam eget leo. Sed rutrum odio blandit facilisis placerat. Quisque congue augue et neque porta gravida.
In hac habitasse platea dictumst. Etiam tortor massa, maximus in eros sit amet, laoreet dapibus augue. Maecenas volutpat vulputate lacinia. Ut venenatis, sem at vehicula mollis, enim enim lobortis nunc, sit amet semper ligula nisi a ligula. Mauris sed odio pulvinar, luctus nisl eget, iaculis eros. Ut malesuada elit neque, a blandit tortor ullamcorper eget. Donec mollis dui lorem. Fusce ut felis interdum, pharetra odio vitae, cursus lectus. Morbi varius urna eu vestibulum ultrices. Donec consequat efficitur interdum.
Cras pulvinar lectus metus, non egestas orci varius ut. Sed turpis augue, tristique nec tempus in, condimentum et mi. Fusce quis lacus tincidunt, vulputate lacus ut, cursus elit. Nam sit amet neque justo. Donec non commodo purus, vitae pellentesque est. Vestibulum sagittis aliquam mi sed iaculis. Aliquam erat volutpat. Donec at nulla vitae est dignissim varius ac non augue. Praesent ac condimentum tortor. Praesent quis dictum sapien. Etiam pretium leo quis nisi interdum, ac egestas elit efficitur. Fusce tempus eros nec lobortis tempus. Aenean fermentum aliquam feugiat. Nam molestie nisi eget ligula mollis ornare. Aliquam purus urna, aliquet id odio in, blandit viverra erat.
Pellentesque consequat nisl sed efficitur iaculis. Quisque lacus purus, dictum ut venenatis at, suscipit in tellus. Aenean nec tortor ac turpis suscipit mattis eu id nulla. Vestibulum eleifend sollicitudin porttitor. Nam hendrerit blandit enim eu tristique. Maecenas a risus ut arcu varius aliquam vel nec dui. In at risus sit amet urna lacinia malesuada. Aliquam mi eros, dapibus vel diam in, bibendum ullamcorper odio. Donec ut eros posuere, tincidunt eros porta, tristique nunc. Nullam mi dui, venenatis vitae nunc ac, porttitor euismod odio. Praesent bibendum sem vel dui congue aliquam.
Quisque egestas est vitae elit maximus porta. Aenean et posuere ipsum. Pellentesque pretium risus fringilla, gravida lorem sed, mattis urna. Aenean hendrerit risus elit, eu dignissim felis ullamcorper quis. Mauris porttitor tellus non lectus lacinia, non cursus erat fermentum. Cras facilisis lacus vitae lectus vehicula varius. Nullam malesuada libero non neque tempus placerat. Vivamus dignissim dolor ante, eget pretium felis viverra id. Quisque eleifend sit amet purus vitae congue. Suspendisse potenti. Donec eget condimentum urna. Nulla sed</p>
</main>
<div id = "footer">Footer</div>
</div>
</div>i will answer wait. Don't use height:100vw. As it is restricting it to go further.
#header {
background-color: blue;
}
#footer {
background-color: red;
}
#container {
background-color: #2E3243;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
min-width: 100vw;
}
#main-container {
display: flex;
flex: 1 1 0%;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
justify-content: center;
}