Flex Child Items have Different Heights

user_8758206 0
Viewed 2020

I'm trying to get the flex items (the orange div and picture div) to have the same heights. Setting a height of 100% doesn't make any difference, and as you shrink the browser window, eventually the orange div becomes taller than the picture div.

Any idea where I'm going wrong here? I thought the flex children usually have equal heights.

Thanks for any help here.

.appShopSummaryContainer {
  display: flex;
  flex-flow: column wrap;
}

.appShopSummaryContainer .appShopSummaryProductWrap {
  flex-basis: 100%;
  background: pink;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.appShopSummaryContainer .appShopSummaryImg {
  flex: 0 0 40%;
  height: auto;
  padding-bottom: 26.667%;
  background: green;
  background-size: cover !important;
  background-position: center center !important;
}

.appShopSummaryContainer .appShopSummaryInfo {
  flex: 0 0 60%;
  background: orange;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}

.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
  cursor: pointer;
  background: #214291;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
<div class="appShopSummaryContainer">
  <!-- FOR EACH THING DO THIS -->
  <div class="appShopSummaryProductWrap">
    <a href="#" class="appShopSummaryImg" style="background:url('https://cml.sad.ukrd.com/image/394545.jpg')"></a>
    <div class="appShopSummaryInfo">
      <h3>title here...</h3>
      <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

flexbox css html
3 Answers

It's because you have aligned your items to the centre, remove that from your appShopSummaryProductWrap and your height:100% from appShopSummaryInfo and it will work:

.appShopSummaryContainer .appShopSummaryProductWrap {
  background: pink;
  width: 100%;
  display: flex;
  flex-wrap:nowrap;
}

.appShopSummaryContainer .appShopSummaryImg {
  display:block;
  width:40%;
  padding-bottom: 26.667%;
  background: green;
  background-size: cover !important;
  background-position: center center !important;
}

.appShopSummaryContainer .appShopSummaryInfo {
  flex-grow:1;
  background: orange;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}

.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
  cursor: pointer;
  background: #214291;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
<div class="appShopSummaryContainer">
  <!-- FOR EACH THING DO THIS -->
  <div class="appShopSummaryProductWrap">
    <a href="#" class="appShopSummaryImg" style="background:url('https://cml.sad.ukrd.com/image/394545.jpg')"></a>
    
    <div class="appShopSummaryInfo">
      <h3>title here...</h3>
      <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

user_17909820

Try to remove in this class .appShopSummaryContainer .appShopSummaryProductWrap align-items, and in .appShopSummaryContainer .appShopSummaryInfo height remove

user_103302740

Couple of things;

  • In css it is normal to use hyphens for your classes in stead of camelCasing.
  • If you use background in an style attribute you have to use !important in your css. If you use background-image you don't.
  • You used columns, while this is a row.
  • Flex items need a container with a height.

.appShopSummaryContainer {
  display: flex;
  flex-flow: row wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
  flex-basis: 100%;
  background: pink;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
  flex: 0 0 40%;
  height: 100%;
  background: green;
  background-size: cover;
  background-position: center;
}
.appShopSummaryContainer .appShopSummaryInfo {
  flex: 0 0 60%;
  background: orange;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
  cursor: pointer;
  background: #214291;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
<div class="appShopSummaryContainer">
  <!-- FOR EACH THING DO THIS -->
  <div class="appShopSummaryProductWrap">
    <a href="#" class="appShopSummaryImg" style="background-image: url('http://www.dieren-en-planten.nl/wp-content/uploads/2015/08/800px-Meerkat_feb_09.jpg')"></a>
    <div class="appShopSummaryInfo">
      <h3>title here...</h3>
      <a href="#" class="appShopSummaryMoreInfoBtn"
         >More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

user_75072860
Related