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:

:root{
font: 1em sans-serif;
box-sizing: border-box;
}

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

}

main{
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;

}

i{
padding: .7em 0;
}

.main{
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; */
}

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

}

figure{

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

}

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

}

.music-list{
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){
.aside{
display: none;
}
}

The HTML:

    <main>

        <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>

        <div class="main">  

            <figure> 

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

               

            </figure>

            <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>

            </p>

            <div>

                llll

            </div>

            <div class="music-list">

                    kkrj

            </div>

                                                                            

        </div>

        

    </main>

    

    <div class="footer">

    </div>

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.