In my parent container, I have set the display property to flex. Inside, there are two divs with both having flex:1 set. However, the first child div contains an image and takes up twice as much space as the second div.
If the screen is 1000px in height, shouldn't each cover 500px in height?
Everything works as expected when the flex-direction is set to 'row', but with 'column', the divs take up infinite vertical space and adjust their heights as needed.
I want both child divs to evenly cover the remaining visible screen height without extending the height of their parent container vertically.
#info-container {
margin: 0 auto;
margin-top: 5%;
text-shadow: 0 2px 2px #000;
display: flex;
flex-direction: column;
}
#info-container .cover {
text-align: center;
flex: 1;
}
#info-container .cover img {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2%;
box-shadow: 0px 0px 5px #000;
max-width: 100%;
}
#info-container .song-info {
align-self: center;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
flex: 1;
}
#info-container .song-info h4 {
margin-top: 10px;
font-weight: 100;
// text-decoration: underline;
padding-bottom: 5px;
border-bottom: 1px solid white;
width: 100%;
}
// suggested songs
.suggested-songs {
margin-top: 5%;
}<div id="info-container">
<div class="cover"><img class='cover-photo' src='https://images.unsplash.com/photo-1523895665936-7bfe172b757d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' alt="cover">
</div>
<div class="song-info">
<h4>Test : <span class="song-name"> Test</span>
</h4>
<h4>Test : <span class="artist">Test</span></h4>
<h4>Duration : <span class="duration">3:26</span></h4>
</div>
</div>codepen : https://codepen.io/AfaqQazi/pen/QWLaybo?editors=1100