如何在微信小程序中实现如下效果？

Question

就是类似于图中这种子元素溢出自动折叠，并且有一个可以展开的按钮。

Answer 1

浮动 弹性盒 自适应

Answer 2

<div :class="isAllHeight % 2 != 0 ? 'common-search-all-h' : 'search-wrapper'">
 
</div>
<div>
        <span
          @click="seachMore"
          v-if="isAllHeight % 2 == 0"
          class="have-more-info"
          ><i class="el-icon-arrow-down"></i></span
        >
        <span
          @click="seachMore"
          v-if="isAllHeight % 2 != 0"
          class="have-more-info"
          ><i class="el-icon-arrow-up"></i></span
        >
</div>
data() {
    return {
      isAllHeight: 0,
    }
}
methods:{
  seachMore() {
      this.isAllHeight++;
  },
}
<style>
  .search-wrapper {
    background: #fff;
    padding: 20px 0 0 20px;
    border-radius: 4px;
    height: 70px;
    overflow: hidden;
  }

  .common-search-all-h {
    background: #fff;
    padding: 20px 0 0 20px;
    border-radius: 4px;
    height: 100%;
  }
</style>