title: Displaying a flexbox in old browsers
body: <p>First I will explain what I have so far;
  A dynamic canvas which is always at the middle of the page, it's width is calculated by javascript calculations so it might vary, after that some flexbox divs are added to it's sides and they fill the rest of the page equally(it works the same way even with CTRL resizing):</p>
  
  <p><a href="https://jsfiddle.net/62g1mqw0/2/" rel="nofollow noreferrer">https://jsfiddle.net/62g1mqw0/2/</a></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="divA"&gt;&lt;/div&gt;
    &lt;div class="divB"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div class="divC"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;style type="text/css"&gt;
    * {
    box-sizing: border-box;
  }
  body {
    height: 100vh;
    margin: 0;
  }
  .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
  }
  .wrapper div {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    border: 1px solid;
  }
  .wrapper .divB {
    border: none;
  }
  #canvas {
    vertical-align:top;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  var canvas = document.getElementById("canvas");
  
  var WIDTH = 500; // This could be anything! it comes from
  //previous calculations which I did not include here because they are irelevant
  
  document.getElementsByClassName('divB')[0].style.flex = '0 0 ' + WIDTH + 'px';
  
  var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
  var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;
  
  document.getElementById("canvas").style.width = width + 'px';
  document.getElementById("canvas").style.height = height + 'px';
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, width, height);
  
  // resize handler Ref: https://developer.mozilla.org/en-US/docs/Web/Events/resize
  (function() {
    window.addEventListener("resize", resizeThrottler, false);
    var resizeTimeout;
  
    function resizeThrottler() {
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();
        }, 66);
      }
    }
  
    function actualResizeHandler() {
      var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
      var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;
  
      document.getElementById("canvas").style.width = width + 'px';
      document.getElementById("canvas").style.height = height + 'px';
      ctx = canvas.getContext("2d");
      ctx.fillStyle = "red";
      ctx.fillRect(0, 0, width, height);
    }
  }());
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see on the jsFiddle, the total outcome is that 100% of the width and height of the page are filled by both canvas and flexbox.</p>
  
  <p>Now, in modern browsers you won't see a problem, but in old browsers you will see weird stuff going on; one div floats to the next, some black spots etc. It is very important to me to have old browsers support since I compile it with cordova and Android users with old versions still have old browsers, and they might see my app very weird. I've tested it on KitKat and some more old versions and I don't know why they don't support the flexbox properly. I added -webkit lines and it still didn't help. I don't even mind going to another completely different solution that doesn't involve flexbox</p>