Flexbox is not centered at the bottom of the page - html

Question

This is my issue on code pen:
https://codepen.io/mch-sg/pen/zYaKdNg
The flexbox is centered on flex-start, but when I scroll to the bottom, the box starts to upwards, and I have absolutely no idea what causes this. I thought the sticky parameter had something to do with it, but I see that I need to search for help here.
/* PRIMARY ATTRIBUTES */
:root {
--bgc: #A793FE;
--dim: #939393;
--hrc: rgb(39, 39, 39, 0.1);
--bgswitchmode: #FFFFFF;
--iconbg: #FFFFFF00;
--txtcol: #000000; // #BB3333
}
body.dark-theme {
// body.dark-theme
--hrc: rgb(240, 240, 240, 0.1);
--bgswitchmode: #000000;
--txtcol: #FFFFFF;
--hrc: rgb(200, 200, 200, 0.2);
}
body {
height: 100%;
transition: 0.2s;
background-color: var(--bgswitchmode);
color: var(--txtcol); // #FBFAF9
font-family: 'Inconsolata', monospace;
margin-top: 100px;
margin-left: 100px;
margin-right: 8%;
max-width: 500px;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 25%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
align-items: center;
}
.top {
position: absolute;
width: 100%;
height: 70px;
text-align: center;
padding-top: 35px;
}
button {
float: left;
width: 0%;
height: 0%;
background-color: red; //var(--iconbg)
color: var(--txtcol);
font-size: 20px;
/* border-radius: 10px; */
border: none;
margin-top: 15px;
cursor: pointer;
}
.d {
background-color: red; //var(--iconbg)
color: var(--txtcol);
font-size: 20px;
/* border-radius: 10px; */
border: none;
/* margin-top: 15px; */
cursor: pointer;
}
.txt {
text-decoration: none;
font-kerning: normal;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
line-height: 30px;
}
a {
text-decoration: none;
}
h1 {
font-family: 'Segoe UI', sans-serif; // 'Lato', sans-serif;
font-size: 40px;
font-weight: 500; // 300
letter-spacing: 1px;
}
h2 {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
h3 {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 500;
letter-spacing: 0px;
text-transform: uppercase;
text-indent: 5%;
}
.head-title {
font-family: 'Segoe UI', sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: 1px;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--hrc);
margin: 1em 0;
padding: 0;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: white;
opacity: 0;
}
/* TYPOGRAPHY */
.text {
font-family: 'Inconsolata', monospace;
font-size: 17px;
line-height: 1.5;
}
.hlink {
/* color: rgb(175, 175, 175); */
color: var(--bgc); //
text-decoration: none;
transition: 0.2s;
cursor: pointer;
}
.hlink:hover {
/*color: #f5978e; #929da6*/
color: #939393; //
}
a:-webkit-any-link {
text-decoration: none;
}
.link {
/* color: rgb(175, 175, 175); */
font-family: 'Inconsolata', monospace;
color: var(--bgc); // #EE8869
text-decoration: none;
transition: 0.2s;
cursor: pointer;
}
.link:hover {
/*color: #f5978e; #929da6*/
color: #939393; //
}
.navhov {
/* color: rgb(175, 175, 175); */
color: var(--txtcol); // #FBFAF9
text-decoration: none;
/* transition: 0.2s; */
// font-size: 19px;
}
.navhov:hover {
/*color: #ffb086 #f5978e*/
transition: 0.2s;
color: var(--bgc); //
}
.dim {
color: var(--dim);
text-decoration: none;
transition: 0.2s;
}
img:hover {
transition: 0.2s;
color: var(--bgc); //
}
/* SELECTION */
::-moz-selection {
/* Code for Firefox */
color: var(--bgswitchmode);
background: var(--bgc); // #ffb086
}
::selection {
color: var(--bgswitchmode);
background: var(--bgc);
}
/* FLEXBOX */
.flexbox-container {
flex: 1;
overflow: auto;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
justify-content: center;
align-items: flex-start;
overflow: auto;
}
.flexbox-item {
width: 100%; // 95%
border: 0.1px solid rgb(39, 39, 39, 0.5);
border-radius: 25px;
padding: 50px;
align-items: center;
justify-content: center;
/* display: flex; */
}
.flexbox-item-1 {
align-items: center;
justify-content: center;
min-height: 100px;
border: 0.1px solid rgb(39, 39, 39, 0.2);
margin: 0px 0px 0px 50px;
/* margin: 150px 75px 150px 150px; */
/* 100px 0px 50px 50px */
display: relative;
overflow: auto;
top: 50%;
transform: translateY(-50%);
}
.flexbox-item-2 {
min-height: 100px;
border: 0.1px solid rgb(39, 39, 39, 0.2);
margin: 100px 50px 100px 50px;
/* 150px 150px 150px 75px */
/* 125px 175px 0px 125px */
display: relative;
overflow: auto;
/* width: 40%; */
}
div.sticky {
position: -webkit-sticky;
position: sticky;
align-items: center;
justify-content: center;
}
.sticky2 {
/* top: 50%; */
/* -ms-transform: translateY(-50%);
transform: translateY(-50%); */
}
.sg {
padding: 50px;
font-size: 20px;
}
.ss {
position: fixed;
}
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
html {
overflow-x: hidden;
}
.cent {
font-family: 'Inconsolata', monospace;
font-weight: 500;
text-decoration: none;
margin-left: 40%;
/* 43% */
font-size: 17px;
}
.mb {
margin-bottom: -10px;
}
.mbl {
margin-bottom: 150px;
}
ul.nav {
padding-left: 0px;
text-align: center;
}
ul.nav>li {
display: inline-block;
padding: 0px 50px;
}
ul.nav>li:hover {
background-color: #00000000;
}
ul.nav>li>a {
text-decoration: none;
}
.subhead {
font-size: 22px;
font-weight: 400;
}
.sublink {
font-size: 20px;
font-family: 'Inconsolata', monospace;
font-weight: 500;
}
<div class="flexbox-container">
<div class="flexbox-item flexbox-item-1 sticky sg">
<div class="cent"><a class="navhov" href="/norsa/">Home</a><br></div>
<div class="cent">
<a class="navhov" href="#section1"><br><br>1.0. Getting started</a><br></div>
<div class="cent ">
<a class="navhov" href="#section2"><br><br>2.0. Introduction</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3"><br><br>3.0. Business Strategy</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-1"><br>⠀⠀⠀⠀3.1. Executive Summary</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-2"><br>⠀⠀⠀⠀3.2. Products & Services</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-3"><br>⠀⠀⠀⠀3.3. Market Analysis</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-4"><br>⠀⠀⠀⠀3.4. Marketing & Sales</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-5"><br>⠀⠀⠀⠀3.5. Company Organization</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-6"><br>⠀⠀⠀⠀3.6. Financial Projections</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section4"><br><br>4.0. Financial</a><br></div>
<div class="cent">
<a class="navhov dim" href="/norsa/helpme/"><br><br><br><br>Help me</a>
</div>
<div class="cent">
<a class="navhov dim" href="#sectionA"><br>About<br></a><br></div>
<div class="cent pleek"><img class="bi bi-moon d dim pleek" src="" height="0" width="0" onclick="dark()" />
<img class="bi bi-bookmark-heart-fill d dim" src="" style="margin-left: 35px;" height="0" width="0" />
</div>
</div>
<div class="flexbox-item flexbox-item-2 text">
<div id="section1" class="txt">
<h1>Help me</h1>
<h1 class="mb dim subhead">We are a simple website for businesses, providing a wide variety of company templates, from employee agreements to style guides and strategies.</h1><br>
<br> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
<br><br> Fusce luctus vestibulum augue ut aliquet. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
<br><br><br>
<hr/>
<br>
</div>
<div id="section2" class="txt">
<h2 class="mb"> 2.0.⠀⠀Introduction</h2> <br>
<a class="head-title">Whatever you do, don't quit.</a>
<br><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
massa. Fusce luctus vestibulum augue ut aliquet.
<br><br>
<a class="link" href="/assets/" target="_blank">🡢 Business strategy</a><br>
<a class="link" href="/assets/" target="_blank">🡢 Download 'The Brand Guide'</a>
<br><br> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
<br><br><br>
<hr/>
<br>
</div>
</div>
I tried messing around with the margins and centering, as well as the sticky parameter, it did not work.
I apologize for the messy file :)

Answer 1

flex items are not supposed to have justify-content and align-items, though they are just ignored. Regarding your question, Remove sticky from the element position. That should solve it.