Having issues with flex box having one of it's items absolutely positioned

I don’t know what the white space in the diagram above is about. After all, I’ve set align-self: stretch .

The CSS:

font: 1em sans-serif;
box-sizing: border-box;

display: flex;
flex-flow: column;
margin: 0;
height: 100%;
height: 100vh;


display: flex;
flex: 1 1 auto;


.aside {
display: flex;
flex-flow: column;
flex: 0 0 3em;
background-color: #e6dfdfc5;
align-items: center;

.aside div{
margin: 0 0 1.5em;
font-size: 1em;
/* width: 100%; / / relaced with align-self*/
align-self: stretch;
display: flex;
justify-content: center;

.aside div:hover{
background-color: rgb(139, 131, 131);


.aside div:nth-child(1) > i {
font-size: 1.3em;

.aside div:nth-child(8){

margin-top: auto;


padding: .7em 0;

background-color: rgba(245, 245, 245, 0.801);
flex: 1 1 auto;
display: flex;
flex-flow: row wrap;
position: relative;
overflow: hidden;


.main p{
color: white;
z-index: 2;
flex: 2 1 7em;
text-transform: capitalize;
font: 1.5em/1.5 sans-serif;
/* margin: 4em 0 0 1em; */
align-self: flex-start;
letter-spacing: 1px;
opacity: .99;
border: 1px solid red;


.main div:nth-child(3){
flex: 1 0 8em;
z-index: 4;
max-height: 15em;
background-color: rgb(37, 37, 25);
/* color: red; /
margin-bottom: 0; */

background-color: rgba(45, 110, 252, 0.993);
flex: 0 1 4em;



margin: -86px 0  0;
height: 20.5em;
overflow: hidden; 
padding: 0;
position: absolute;
top: 0px;
z-index: 1;


max-width: 100%;
height: auto;
filter: blur(.8px);


background-color: green;
/* align-self: stretch; */
z-index: 5;

/when i changed the height it tends to fill up space. align-self: strecth didn;t work/

flex: 1 1 100%;
/* height: 100%; */

@media screen and (max-width: 30em){
display: none;



        <div class="aside">

            <div><i class="fi-xtluxl-three-bars-thin"></i></div>

            <div><i class="fi-xtluxl-magnifying-glass-thin"></i></div>

            <div><i class="fi-xnluxl-volume-3"></i></div>

            <div><i class="fi-xtluxl-user-plus-thin"></i></div>

            <div><i class="fi-xtluxl-bar-chart-thin"></i></div>

            <div><i class="fi-ctluxl-unordered-list-thin"></i></div>

            <div><i class="fi-xtluxl-plus-thin"></i></div>

            <div><i class="fi-xwluxl-setting-wide"></i></div>


        <div class="main">  


                <img src="images\sebastian-radu-S_NfCkEw28A-unsplash.jpg" alt="music-image"> 



            <p class="album-title">

                <span>kenichiro nishihara - step firmly slow</span>

                music for your soul <br>

                <small>unknown Album <time datetime="2019-6-8T20:00:00">6/9/2020 8:00PM</time></small>





            <div class="music-list">








    <div class="footer">


The above is what i got with height: 100 on the green box and overflow: hidden on the .main.

But the white space thing is weird. @ieahleen

Please do not pull people into your thread by their username just because you want their help. If you do not have a specific reason to mention someone, please do not do so.

also, I am sorry I am not able to help you. I am pants at this stuff. I can just help with freecodecamp challenges and not much more.
I just keep clean and help with algorithms myself.