The picture display on the left of the two column layout is determined by the content height on the right

demand ：

        Card content is a two column layout , Text... Left ; Now it is required that the display part of the picture on the left should be determined by the height of the content on the right , The effect is as shown in the picture ：

 html Layout ：

    <div class="detail-card-content">

    <!--  On the left  -->
      <div class="left" >
        <div :style="{height:`${rightHeight}px`}" class="left-box" >
          <img src="https://4gimg.map.qq.com/test/c955266c3cf8f974e7acde20e2c6a011.png"
          >
        </div>
      </div>

    <!--  Right content  -->
      <div class="right">
        <div class="right-box">
           <div class="111">
            <span
              v-for="item in themeTags"
              v-show="themeTagsStyleConfig(item)"
              :style="getTagStyle(item,'rowtag')"
              class="detail-card_tag-rich"
            >{
   {
              item.tag_name
            }}</span>
          </div>
          <div class="222">
             <div
              v-show="themeTipsStyleConfig(item).icon"
              class="detail-card-tip-icon"
            >
              <img
                :src="themeTipsStyleConfig(item).icon"
              >
            </div>
          </div>
          <!-- <div>333</div> -->

        </div>
      </div>
    </div>

About rightHeight The monitor is as follows ：

  watch: {

    data: {
      handler(value) {
      },
    },
    poiData: {
      handler(value) {
        this.$nextTick(() => {
          console.error(document.querySelector('.right-box') ? document.querySelector('.right-box').offsetHeight : 80);
          const  Height = document.querySelector('.right-box') ? document.querySelector('.right-box').offsetHeight : 80;
          this.rightHeight = Height;
        });
      },
    },
  },

css Realization ：flex Layout + overflow-y: hidden;

//  Outer layer 
.detail-card-content {
  display: flex;  // 
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: 0.14rem;
  padding: 0.2rem 0;
  width: calc(100vw - 0.32rem);
  border-radius: 0.4rem;
  background-color: #FFF;
}

//  On the left 
.left {
  width: 1.6rem;
  // background: gold;
  .left-box {
    display: flex;
    overflow: hidden;
    flex-direction: column-reverse;
    min-height: 70px;
    border-radius: 0.34rem;
  }
}

//  Right content 

.right {
  flex: 1;

  .right-box {
    display: inline-block;
  }
}

Be careful ：

        1. Implementation of two column layout ： Parent box flex Layout , Left box width , On the right flex：1

        2. flex The child elements of the layout will adapt to the height of the parent element , So to get the height of the box on the right , Need to be in .right below Wrap the contents in a box , The content on the right will automatically open .right-box ; To get the height on the right .