Flex keeps on resizing itself in Firefox - html

Question

I'm using Vis.js to create diagrams. Relevant code:
.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>
Full code: https://codepen.io/MadBoyEvo/pen/XWmbZra
It works fine in Chrome, Edge, IE and even Firefox with one problem. In firefox, the section where diagram is located keeps on resizing itself over and over. I'm sure this is my mistake with CSS but whatever I try to fix it doesn't work.

Answer 1

The diagram is contained in a <canvas> element. That element has two height values assigned, both as inline styles:
height: 100%, and
height="484" (or whatever value it happens to have at the moment).
Once you remove the height: 100% the rolling expansion stops.

Answer 2

Author of Vis.js provided me with a tip: 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>
This solves it for me.