css - flex布局中，如何让子元素内部的元素高度自适应？

问题描述

问 题

如图所示，这个最外层的元素的display是flex，然后有两个div，左边是pic-card，右边是vote-box，整个外层warp的高度随着左边图片的尺寸不同而自适应变化，导致vote-box的高度随着pic-card的高度自适应变化。

我现在想让.vote-box>.vote-bar这个元素的高度自适应.vote-box（也就是pic-card的高度减去.vote-label，"vote-number以及love-button的高度），但是我将这个div的高度设置为100%或者calc(100%-vote-label，"vote-number以及love-button的高度)，它的高度却仍然是0，这是为什么？我该如何实现我的效果？

<template>
  <div class="warp">
    <div class="pic-card">
      <img class="pic" :src="pic" alt="">
      <div class="personal-card" @click="showPerson">
        <img class="avatar" :src="avatar" alt="">
        <router-link :to="person" class="username">{{ username }}</router-link>
      </div>
    </div>
    <div class="vote-box">
      <div class="vote-label">
        <img class="vote-label-pic" src="static/label.png" alt="">
        <span class="rank">{{ rank }}</span>
      </div>
      <div class="vote-number">{{ count }}</div>
      <div class="vote-bar">
        <div class="bar-total">
          <div class="bar-used"></div>
        </div>
      </div>
      <div class="love-button">
        <img :src="lovePic" alt="">
      </div>
    </div>
    <div style="clear:both;overflow: auto;"></div>
  </div>
</template>

<script>
// import top_pic from ''
export default {
  name: 'Item',
  props: [
    'love',
    'count',
    'rank',
    'pic',
    'avatar',
    'username'
  ],
  data () {
    return {
      msg: this.name,
      lovePic: this.love ? 'static/love.png' : 'static/not_love.png',
      count: this.count,
      pic: this.pic,
      avatar: this.avatar,
      username: this.username,
      person: 'person/' + this.username
    }
  },
  methods: {
    showPerson () {
      this.$router.push({name: 'person', params: { id: 123 }})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*已设置全局box-sizing: border-box;*/
/*@import './item.scss'*/
.warp {
  /*position: relative;*/
  margin: 30px 0;
  padding: 20px;
  background-color: #fff;
  display: flex;
  width: 100%;
}

/*left*/
.pic-card {
  /*float: left;*/
  position: relative;
  width: calc(100vw - 108px);
  /*background-color: red;*/
  border-radius: 50px;
  overflow: hidden;
}
/*right*/
.vote-box {
  /*float: left;*/
  width: 108px;
  /*background-color: blue;*/
  margin-left: 20px;
}

.pic {
  width: 100%;
}
.personal-card {
  /*background-color: blue;*/
  position: absolute;
  left: 60px;
  bottom: 40px;
}
.avatar {
  float: left;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.username {
  float: left;
  margin-left: 20px;
  height: 120px;
  line-height: 120px;
  font-size: 54px;
  color: white;
}

.vote-label {
  width: 100%;
}
.rank {
  position: relative;
  top: -90px;
  font-size: 48px;
}
.vote-number {
  position: relative;
  top: -40px;
  font-size: 48px;
}
.vote-label-pic, .love-button img {
  width: 108px;
}
.vote-box * {
  text-align: center;
}
.vote-number {
  width: 100%;
}
.vote-bar {
  width: 100%;
}


.vote-bar {
  /*margin: 0 auto;*/
  /*margin-top: 171px;*/
  /*padding: 30px;*/
  /*position: relative;*/
  background-color: red;
  width: 100%;
  height: 100%;
  /*100%高度-标签背景图高度-底部红心高度-文字高度-文字上边距*/
  /*height: calc(100% - 166px * 3 - 108px * 3 - 36px - 27px);*/
}
.bar-total {
  /*background-color: #E8E8E8;
  height: 100%;
  border-radius: 50px;*/
}
.bar-used {
  /*position: relative;
  top: calc(100% - 50%);*/
  /*background-color: red;*/
  /*background: linear-gradient(to top, #fc8291, #fa213b);
  height: 50%;
  border-radius: 50px;*/
}


.love-button {
  position: relative;
  /*float: left;*/
  /*margin: 0 auto;*/
  /*left: 32px;*/
}
.love-button img {
  width: 108px;
}

</style>

解决方案

.vote-box {
  display: flex;
  flex-direction: column;
}

.vote-bar {
  flex: 1;
}

这篇关于css - flex布局中，如何让子元素内部的元素高度自适应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！