Flex продолжает изменять размеры в Firefox

Question

Я использую Vis. js для создания диаграмм. Соответствующий код:

.defaultSection {
  border: 1px solid #bbbbbb;
  padding-bottom: 0px;
  margin: 5px;
  width: calc(100% - 10px);
}

.overflowHidden {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

.flexParent {
  display: flex;
  justify-content: space-between;
  padding: 2px;
}

.flexParentInvisible {
  display: flex;
  justify-content: space-between;
}

.flexElement {
  flex-basis: 100%;
}

.flexPanel {
  flex-basis: 100%;
}

.roundedCorners {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  margin: 5px;
}

<div data-panes="true">
  <div id="Tab-ta6f7ijb-Content" class="active">
    <div class="defaultSection roundedCorners overflowHidden">
      <div class="defaultHeader" style="text-align:center;background-color:#00bfff"><a name="Test" style="color: #ffffff;">Test </a><a id="show_505656775" href="javascript:void(0)" onclick="show('505656775');" style="color: #ffffff; display:none;">(Show)</a><a id="hide_505656775" href="javascript:void(0)" onclick="hide('505656775');"
          style="color: #ffffff; display:none;">(Hide)</a></div>
      <div id="505656775" class="flexParent flexElement overflowHidden">
        <div id="505656775" class="flexParent flexElement overflowHidden collapsable">
          <div id="Diagram-hvardq4p" class="diagram"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Полный код: https://codepen.io/MadBoyEvo/pen/XWmbZra

Отлично работает в Chrome, Edge, IE и даже Firefox с одной проблемой. В firefox раздел, в котором расположена диаграмма, продолжает изменять размеры снова и снова. Я уверен, что это моя ошибка с CSS, но все, что я пытаюсь исправить, не работает.

Answer 1

Диаграмма содержится в элементе <canvas>. Этому элементу назначены два значения height, оба в виде встроенных стилей:

• height: 100% и
• height="484" (или любое другое значение, которое он имеет в данный момент) .

После удаления height: 100% расширение прокатки останавливается.

Answer 2

Автор Vis. js предоставил мне совет: https://github.com/visjs/vis-network/issues/628

<div Class="diagram" Style="position:relative">
     <div style="position:absolute" id="Diagram-w5gcskfb" class="diagram"></div>
</div>

Это решает это для меня.