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. @ilenia