Flex+js realizes that the height of the internal box follows the maximum height

effect

1、 All the small cards inside are in one line , Beyond plus horizontal scroll bar ;
2、 The height of each card follows the height of the highest card inside ：

Realization

1、 First, the parent frame of the whole package card , His height must follow the maximum card height inside . Dynamically set here height, In order to flex Layout , To meet the above style ,flex The parent must have a height , Not for auto

  <div class="ind-type-group" ref="group" :style="{height: groupHeight}">
  	<!--  Multiple cards  -->
  	<ind-type-card class="type"></ind-type-card>
    <ind-type-card class="type"></ind-type-card>
    ...
  </div>

2、 flex style （gap Use with caution , Browser compatibility is not good ）

.ind-type-group {
    
  display: flex;
  align-items: stretch; //  The internal card is highly stretched 
  width: 100%;
  overflow: auto;
  padding-bottom: 20px; .type {
    
    flex: 1;
    min-width: 400px;
    max-width: calc((100% - 40px)/3);
  }
  .type + .type {
    
    margin-left: $gap4x;
  }
}

//  Card style  .ind-type-card {
    
  height: 100%;
  width: 100%;
}

3、 adopt js Dynamically set the parent height

data() {
    
  return {
    
    groupHeight: 'auto',  //  Initial settings auto
  }
},

mounted() {
    
  this.getAllTypes()
  window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
    
  window.removeEventListener('resize', this.setHeight)
},

methods: {
    
 //  The height is not fixed , All items are based on the highest 
 setHeight() {
    
   this.groupHeight = 'auto'
   this.$nextTick(() => {
    
   	 //  Get the parent height dynamically , And set up height,  This setting is mainly for flex Of stretch Set height reference 
     this.groupHeight = this.$refs.group.clientHeight + 'px'
   })
 },
}