如果我们切换到在.flex-item上切换active类，我们可以向活动的.flex-item添加一个高度，以便为.text留出空间。
注意：为了正确定位.text元素，一定不要定位.flex-item（或position: static）。否则.text的left: 0将位于父.flex-item的左侧。
下面是一个工作示例的片段：

var coll = document.getElementsByClassName("rectangle");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    document.querySelectorAll('.flex-item.active').forEach(x => x.classList.remove('active'))
    this.parentElement.classList.add("active");
  });
}

.flex-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item {
  width: 200px;
}

.rectangle {
  width: 200px;
  height: 50px;
  background-color: red;
  cursor: pointer;
  position: relative;
}

.flex-item.active {
  height: 155px;
}

.flex-item:not(.active) .text {
  display: none;
}

.text {
  position: absolute;
  left: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  margin-top: 5px;
  height: 100px;
  background: grey;
  color: #fff;
  box-sizing: border-box;
}

/*tooltip styles*/
.flex-item.active .rectangle::after {
  content: '';
  border: solid 10px transparent;
  border-bottom: solid 10px grey;
  position: absolute;
  bottom: -5px;
  left: calc(50% - 5px);
}

<div class="flex-container">
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
</div>

希望这能帮上忙。

The Details disclosure element已经在浏览器中内置了一个 * open/close * 机制，所以为什么不使用它并修改它的行为来满足我们的需求呢？
基本原则是

<details>
   <summary>some clickable content</summary>
   <div>
      Any content you want to disclose when the <summary> gets clicked
   </div>
</details>

• 使用CSS，我们可以控制内容的显示方式和位置。无论我们使用默认的块样式，还是Flexbox/Grid布局，都可以将内容放置在常规文档流之外。它们是常规元素，所以基本上什么都可以。
• 由于默认情况下，当用户点击其他地方时，detail/summary保持打开状态，我们需要一些Javascript来 * 自动关闭 * 当前"披露"的内容。
• 当用户没有看到"关闭按钮"时，他们往往会感到困惑，所以我在那里放了一个。但是，点击 * 信息框 * 中的任何地方都会关闭它。

我做得有点过火，创建了一个响应式演示，完全忽略了你的代码（对不起!），同时尽可能地接近示例站点。我在适用的地方注解了所有内容。如果有不清楚的地方，请在注解中告诉我。

• • 片段**

x一个一个一个一个x一个一个二个一个x一个一个三个一个