css如何取消已经设置过的宽高属性？

无数经验，都是从教训中得来的

1.场景描述

有层级为3的一组div标签，class名分别为container、wrap、content，需求是当盒子wrap的高度大于盒子container时，可以进行滚动。
但是此时盒子wrap使用了一个全局css样式height：100%，就是说此时container 、wrap高度一致，需要将wrap改为自适应高度（即内容盒子content撑开的高度）

2.布局、样式

<template>
  <div class="container">
    <div class="global_css wrap">
      这里是父元素
      <div class="content">这里是子元素</div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
// 假设这个是全局的属性css 不允许修改
.global_css {
  height: 100%;
}
.container {
  overflow: auto;
  width: 700px;
  height: 800px;
  background-color: #ccc;
}
.wrap {
  overflow: hidden;
  margin: 0 auto;
}
.content {
  box-sizing: border-box;
  width: 100%;
  // 内容元素高度很高很高
  height: 2000px;
  border: 1px solid red;
  background-color: #eee;
}
</style>

3.解决办法

解决思路：取消设置height属性

那么该如何解决呢？
首先尝试的是: height:none; // 尝试无果

然后经过搜索发现一个解决办法： height:auto; // nice!!! 解决

// 解决办法
.wrap {
  overflow: hidden;
  margin: 0 auto;

 // 添加属性，取消原有高度
 height: auto;
}