子元素未超过电子邮件中根元素的高度

Question

我正在为公司设计电子邮件。在常规浏览器标签（Chrome）中打开HTML和CSS即可正常使用。但是，当将其粘贴到Gmail邮件中时，会出现一些设计不规范的情况。这些设计不规范之一是容器（子元素）未超过mainContent（父元素）的高度。

我使用过HTML和CSS。

.mainContent {
  background-color: #72b84c;
  width: 100%;
  height: 1000px;
}

.container {
  position: relative;
  top: -10%;
  background-color: white;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  box-shadow: 1px 2px 2px 1px grey;
  padding: 2%;
  text-align: center;
}

<div class="container">
  <h3>Our clients have received up 26.58% ROI on their investments with our data driven research advice.</h3>
  <h3>YOU CAN BE THE NEXT WITH OUR SERVICES</h3>
  <button><a href="https://www.example.org">BUY NOW</a></button>
</div>

它应该在Gmail撰写时产生与正常浏览器标签中所示相同的结果。