时间戳

首页 > 解决方案 > Flex 子项具有不同的高度

html - Flex 子项具有不同的高度

问题描述

我试图让弹性项目（橙色 div 和图片 div）具有相同的高度。将高度设置为 100% 没有任何区别，并且随着您缩小浏览器窗口，最终橙色 div 会比图片 div 高。

知道我在哪里出错了吗？我认为灵活的孩子通常有相同的高度。

感谢您在这里的任何帮助。

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

标签： htmlcssflexbox

解决方案

这是因为您已将您的项目与中心对齐，将其从您的appShopSummaryProductWrap和您的height:100%from中删除，appShopSummaryInfo它将起作用：

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

推荐阅读