title: Nested CSS flexbox problem - only with Safari 14 / MacOS browser
body: <p>I have prepared a simple test case (below), which uses a nested CSS flexbox to give max possible space to the checkered <code>#pixiCanvas</code>, while keeping the yellow <code>#hintDiv</code> and <code>#totalDiv</code> at the screen top/bottom:</p>
  <p><a href="https://i.stack.imgur.com/X6idd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X6idd.png" alt="Firefox" /></a></p>
  <p>The problem is that while my code works perfectly on other browsers (Firefox, Chrome, Opera, Edge, even IE 11; after I have followed the advice to add <code>min-width</code>, <code>min-height</code> to <code>#mainDiv</code> and its children) it <strong>does not work with Safari 14 / MacOS</strong> -</p>
  <p>The <code>#mainDiv</code> or maybe <code>#gameDiv</code> grow too tall and push <code>#totalDiv</code> out of the screen, while <code>#pixiCanvas</code> is cut off and not displayed entirely:</p>
  <p><a href="https://i.stack.imgur.com/oU7sZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oU7sZ.png" alt="Safari 14" /></a></p>
  <p>The structure of my web page is:</p>
  <pre><code>- fullDiv (should occupy 100% / 100 vh)
  -- leftDiv
  -- mainDiv
  --- hintDiv (100% width, on top of screen)
  --- gameDiv (should have max possible width and height)
  --- totalDiv (100% width, on bottom of screen)
  -- rightDiv
  </code></pre>
  <p>Here is my code (open in Safari to see the issue):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(function() {
      $(':button').button();
      $('#fullCheck').checkboxradio();
  
      var gamesMenu = $('#gamesMenu').menu({
        items: '&gt; :not(.ui-widget-header)',
        select: function(ev, ui) {
          ui.item.addClass('selected').siblings().removeClass('selected');
        }
      });
  
      for (var game = 1; game &lt;= 50; game++) {
        gamesMenu.append('&lt;LI CLASS="ui-menu-item-wrapper" VALUE="' + game + '"&gt;GAME ' + game + '&lt;/LI&gt;');
      }
  
      gamesMenu.menu('refresh');
  
      var WIDTH = 400;
      var HEIGHT = 400;
  
      var app = new PIXI.Application({
        width: WIDTH,
        height: HEIGHT,
        view: document.getElementById('pixiCanvas'),
        backgroundColor: 0xFFFFFF
      });
  
      var background = new PIXI.Graphics();
      for (var i = 0; i &lt; 8; i++) {
        for (var j = 0; j &lt; 8; j++) {
          if ((i + j) % 2 == 0) {
            background.beginFill(0xCCCCFF);
            background.drawRect(i * WIDTH / 8, j * HEIGHT / 8, WIDTH / 8, HEIGHT / 8);
            background.endFill();
          }
        }
      }
      app.stage.addChild(background);
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  
  #fullDiv {
    width: 100%;
    height: 100vh;
    background: #FFF;
    display: flex;
  }
  
  #hintDiv,
  #totalDiv {
    font-style: italic;
    text-align: center;
    background: yellow;
  }
  
  #leftDiv {
    text-align: center;
    background: #FCC;
    display: flex;
    flex-direction: column;
  }
  
  #gamesMenu {
    overflow: auto;
  }
  
  #mainDiv {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 200px;
    min-height: 200px;
    
    box-sizing: border-box;
    border: 1px green dashed;
  }
  
  #gameDiv {
    flex-grow: 1;
    min-width: 150px;
    min-height: 150px;
  }
  
  #pixiCanvas {
    width: 100%;
    height: 100%;
    min-width: 100px;
    min-height: 100px;
    background: #CCF;
  
    box-sizing: border-box;
    border: 4px red dotted;
  }
  
  #rightDiv {
    text-align: center;
    background: #CFC;
    overflow-y: auto;
  }
  
  li.selected {
    font-weight: bold;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="fullDiv"&gt;
    &lt;div id="leftDiv"&gt;
      &lt;button id="newBtn"&gt;New game&lt;/button&gt;
      &lt;ul id="gamesMenu"&gt;&lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div id="mainDiv"&gt;
      &lt;div id="hintDiv"&gt;Hint&lt;/div&gt;
  
      &lt;div id="gameDiv"&gt;
        &lt;canvas id="pixiCanvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;div id="totalDiv"&gt;Total score&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="rightDiv"&gt;
      &lt;input id="fullCheck" type="checkbox"&gt;
      &lt;label for="fullCheck"&gt;Full screen&lt;/label&gt;&lt;br&gt;
      &lt;button id="recallBtn"&gt;Recall&lt;/button&gt;&lt;br&gt;
      &lt;button id="shuffleBtn"&gt;Shuffle&lt;/button&gt;&lt;br&gt;
      &lt;button id="swapBtn"&gt;Swap&lt;/button&gt;&lt;br&gt;
      &lt;button id="skipBtn"&gt;Skip&lt;/button&gt;&lt;br&gt;
      &lt;button id="resignBtn"&gt;Resign&lt;/button&gt;&lt;br&gt;
      &lt;button id="pileBtn"&gt;Pile&lt;/button&gt;&lt;br&gt;
      &lt;button id="movesBtn"&gt;Moves history&lt;/button&gt;&lt;br&gt;
      &lt;button id="shareBtn"&gt;Share&lt;/button&gt;&lt;br&gt;
      &lt;button id="playBtn"&gt;Play&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.3/dist/pixi.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here the screenshot of <a href="https://wordsbyfarber.com" rel="nofollow noreferrer">my word game</a>, where the <code>#pixiCanvas</code> grows too large and is shown underneath the grey chat area at the bottom:</p>
  <p><a href="https://i.stack.imgur.com/ap0Wy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ap0Wy.png" alt="Safari" /></a></p>
  <p>The only workaround I have been able to come up sofar has been:</p>
  <pre><code>if (navigator.userAgent.indexOf('Safari') &gt;= 0) {
      $('#gameDiv').css('overflow', 'auto');
  }
  </code></pre>
  <p>but it makes the usage of my word game awkward while dragging letters.</p>
  <p>P.S. I would prefer not to switch to CSS grid, because I have an impression that CSS flex is better supported (and some of my users still use IE 11).</p>