title: Apex Charts dont resize properly when using Flexbox
body: <p>Recently I changed Floats to FlexBox to have easier work with panels (as advised on other questions I did). While most of the things are working as I expect it, I'm having a problem with Apex Charts after the change. </p>
  
  <p>Full code is here:
  <a href="https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html" rel="nofollow noreferrer">https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html</a></p>
  
  <p>Here's how it looks when loaded. You will notice that in 1st and 2nd-row charts go out of bounds even thou the panel they are in is in place and it works for the top row. </p>
  
  <p><a href="https://i.stack.imgur.com/dy3ue.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dy3ue.png" alt="enter image description here"></a></p>
  
  <p>And if I do resize (like 1mm) it will start working correctly. </p>
  
  <p><a href="https://i.stack.imgur.com/zDUiD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDUiD.png" alt="enter image description here"></a></p>
  
  <p>Any idea what could be the problem?</p>
  
  <p>In apex charts CSS it has comments to not use overflow (I tried and it doesn't do anything) but to be honest, I even once forgot to attach that CSS and nothing changed (like everything is done by the JS. </p>
  
  <pre><code>        .apexcharts-canvas {
              position: relative;
              user-select: none;
              /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
          }
  
          /* scrollbar is not visible by default for the legend, hence forcing the visibility */
  </code></pre>
  
  <p>Keep in mind that I'm a total noob when it comes to JS/CSS/HTML so excuse my language. </p>