Why, when the accordion opens again, does it start to fit on the lower blocks?

Question

css

Hello!
There are 3 columns with text information for the event of equal height in the initial state, regardless of the amount of content in them.

This was achieved using a set of rules:

display: flex; flex-direction: column; align-items: stretch;

Further, each list can be expanded by the button in more detail and collapsed by a cross, while maintaining the original height of other columns.

I managed to implement this only once for each column, when it is rotated again, the drop-down list begins to crawl onto the lower blocks. Why and how can it be fixed?

Here is the code in fidl

var mh = 0;
$(".task-box").each(function() {
  var h_block = parseInt($(this).height());
  if (h_block > mh) {
    mh = h_block;
  };
});

$(".task-box-inner a[aria-expanded='false']").click(function() {
  var box = $(".task-box-inner a[aria-expanded='false']").not(this).parents(".task-box");
  box.each(function() {
    $(this).height(mh);
  });
});
$(".card-body a[aria-expanded='true']").click(function() {
  var closebox = $(".card-body a[aria-expanded='true']").parents(".task-box");
  closebox.each(function() {
    $(this).removeAttr("style");
  });
});

<div id="task">
  <div class="row">
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <div class="task-box-inner">
          <h4>Lorem ipsum dolor sit amet</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
          <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
          <div class="collapse" id="collapseevent-1">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <img class="img-fluid" src="img/event-2.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Repudiandae ipsa quae molestiae quis sint. </h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="false" aria-controls="collapseevent-2">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
          <div class="collapse" id="collapseevent-2">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>5 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Это замечательное местоa</span></p>
              <p><i class="fa fa-commenting" aria-hidden="true"></i>Выступающий</p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="true" aria-controls="collapseevent-2"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <img class="img-fluid" src="img/event-3.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Modi, nam maxime aspernatur necessitatibus.</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nam maxime aspernatur necessitatibus. Voluptate explicabo, numquam rerum? Ipsa explicabo voluptatum voluptas, rem aliquid, esse libero. Optio tempore repellendus accusantium aliquid.Lorem
            ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="false" aria-controls="collapseevent-3">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
          <div class="collapse" id="collapseevent-3">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>1 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Нет данных</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="true" aria-controls="collapseevent-3"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

#task .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#task .row>[class*='col-'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 20px;
}

.task-box {
  position: relative;
  margin: 0 auto;
  color: rgb(95, 112, 135);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  border: 1px solid #000;
}

.task-box .task-box-inner>a[aria-expanded="true"] {
  display: none;
}

Answer 1

Wrap the block that appears and make it absolute