Остановите div, перекрывающий другой от увеличения размера

Question

Мой div фильтра-захвата содержался прямо над моим контейнером-захватом, если он не был раскрыт нажатием кнопки, и в этом случае он опускается в перекрытие графоконтейнера.Теперь размер контейнера-захвата увеличился из-за дополнительного содержимого, и он перекрывает мой графовый контейнер, в котором содержится мой svg.Мне нужно, чтобы динамически не делать этого, даже если мой фильтр увеличивается в размере.

У меня есть несколько элементов div, которые содержатся в следующем порядке:

<div class="Engagement-Container">
<div class="Engagement-Body">

<div class="Engagement-Graph" id="graph">
  <div class="Engagement-FilterContainer" 
   </div>
   <div class="Engagement-GraphContainer" 
   <svg
      class="Engagement-GraphSVG"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1 ">
    </svg>
  </div>
</div>

</div>
</div>

Обратите внимание, что фильтр-контейнер захвата и граф-контейнер оба находятся в блоке-графике захвата, а мой svg содержится внутриthe graphcontainer.

На изображении ниже вы можете видеть, что фильтр теперь с большим количеством контента распространяется в область (я скрыл с помощью css, поэтому я показываю его в режиме разработки, я пробовал различные способы, чтобы обойти этоно я думаю, что мне нужно окончательное решение.

CSS:

граф взаимодействия (родительский div)

.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;

@include tablet() {
  width: 65%;
}
}

Engagement-graph-container (содержит граф svg, который я хочу защитить от нежелательного перекрытия)

  .Engagement-GraphContainer {
  position: relative;
  width: 100%;
  height: calc(100% - 56px);
  top: 0;
  background-color: $gray-bg-color;
  transition: height $filter-slide-duration, top $filter-slide-duration;

  @include tablet() {
    background-color: white;
    height: 100%;
  }

  svg {
    width: 100%;
    height: 100%;
  }

  &--WithFilter {
    height: calc(100% - 480px) !important;
    top: 480px !important;

    @include landscape {
      height: calc(100% - 436px) !important;
      top: 436px !important;
    }
  }
}

Фильтр-контейнер (перекрывающийся)

.Engagement-FilterContainer {
  overflow: overlay;
  display: table;
  position: absolute;
  width: 100%;
  z-index: 10;
  transition: transform $filter-slide-duration;
  transform: translateY(-486px);
  visibility: hidden;
  &--Visible {
    transform: translateY(0) !important;
  }

  @include landscape {
    transform: translateY(-436px);
  }
}

Мне бы хотелось, чтобы фильтр работал как обычно, поэтому, когда он развернут, он появится на экране, но когда его нет, я не хочу, чтобы он вторгался в график, независимо от его размера. Когда фильтр был меньше, он былхорошо, что он никогда не появлялся на экране, поэтому он не должен быть динамичным в том, как он измерен.

Спасибо, если вы можете помочь.