Two flexed child divs won't divide space equally because of image size

Question

I have a parent container with display set as flex. Inside there are two divs both have flex:1 set yet my first child div has an image inside it and takes two times more space than the second div.

If the screen is 1000px height then shouldn't each cover 500 heights ?

This works fine when my flex-direction is 'row' but with 'column' you have an infinite vertical space so divs take as much height as they want.

I want both child div to cover the visible remaining screen height equally not extend the height of its 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

https://stackoverflow.com/questions/41774646/image-is-not-resizing-in-a-flexbox-layout — Pete, Sep 05 '19 at 15:12

score 0 · Accepted Answer · answered Sep 05 '19 at 15:16

The flex property only sets the minimum height for a FlexBox item. Since your image tag is taller than the text content, it makes the first div taller. You have two choices if you want to even the divs out.

First: Set a max-height for the img tag:

#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%;
  max-height: 200px;
}

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

Second: Make the image a background image, set a min height for it, and set all its parent elements to 100% height:

html, body, #info-container{
   height: 100%;
}

#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;
  background: url(https://images.unsplash.com/photo-1523895665936-7bfe172b757d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80) center/cover;
  min-height: 300px;
}

/*#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>

Two flexed child divs won't divide space equally because of image size

1 Answers1