由于不断缩小视口大小，需要调整div以适应文本，因为它会溢出

Question

我喜欢我的div在高度上扩展以适应文本，因为它开始溢出（因为我减小了浏览器大小）。当浏览器宽度从1363px平滑减小到320px时，我希望它能够根据内容的要求平滑增加高度。

请帮忙。将受到高度赞赏。谢谢。

＆＃13;

＆＃13;

.centrediv {
  style="width:54%;
 position: absolute;
  top: 26%;
  bottom: 45%;
  left: 0%;
  right: 0;
  margin: auto;
  background-color: rgba(229, 240, 247, 0.75);
  border-radius: 20px;
  border-color: #f0fafb;
  border-width: 1px;
  padding-left: 10px;
  padding-right: 10px;
  height: auto;
}

＆＃13;

<div class="centrediv">
  <h2 style="text-align:center;vertical-align:middle;opacity:1;font-size:22px;">
    Hi,
    <span>
      <br>
      <br>
    </span>
    We are a 
    <span>
      <a href="/courses/team/">XYZ based team</a>
    </span>
    some random text that initially fits the div at max browser size but starts overflowing from the div as the browser/viewport size is reduced.
    <span>
    </span>
    <br>
    <br>
    <span>
      <a href="/courses/product/">Know more.</a>
    </span>
  </h2>
</div>

＆＃13;

＆＃13;

＆＃13;