title: How to fix flexbox example for an apple device?
body: <p>I would like to create a responsive web application with three.js.</p>
  
  <p>I did a skeleton but this seems to run correctly only on PC and Android smartphones. There are problems on apple devices like macbook iphone and ipad. It seems that in these devices the toolbar at the bottom ends up off-screen</p>
  
  <p>I have tried the application on the PC and on some Android smartphone devices and it seems to work, while on IPAD devices it has problems.</p>
  
  <p>This is a <a href="https://codepen.io/gigiLaTrottola/project/editor/ZnWqqn#" rel="nofollow noreferrer">minimal example</a> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/OrthographicTrackballControls.js"&gt;&lt;/script&gt;
  
  
      &lt;link rel="stylesheet" href="styles/toolbar.css"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;style&gt;
      html,body{
          width: 100%;
          height:100%;
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          background: linear-gradient( #EAF0F8,  #749ACF);
      }
  
      .button{
          flex: 0 0 50px;
          background-color: transparent;
          min-height: 71px;
          display: block;
      }
  
  
  .container-row
  {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      background-color: transparent;
  }
  
  .container-column
  {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex:1;
      background-color: transparent;
  }
  
  canvas{
      width: 100%;
      height: 100%;
      min-height: 10px;
      background: transparent;
  }
  
  #sliderDiv{
      display: flex;
      flex: 0 0 70px;
      background-color: transparent;
      order: 1;
      /*margin-bottom: 10px;*/
  }
  
  #playerDiv{
      display: flex;
      flex: 0 0 50px;
      background-color: transparent;
  }
  
  .hspaceExpand{
      flex:1;
      background-color: transparent;
      min-width: 0px;
  }
  
  #notes
  {
      background-color: #ddffdd;
      border : 6px solid #4CAF50;
      flex: 0 0 300px;
      display: none;
  }
  #canvasKf
  {
      background-color: red;
      flex: 0 0 500px;
      display: none;
  }
  #containerSP
  {
      margin-top: 10px;
      margin-bottom: 10px; 
      display: flex;
      flex-direction: column;
  }
  
  #viewToolBarMobile
  {
      position:absolute;
      background-color: rgba(0,0,0,0.3);
      bottom:0px;
      width: 100%;
      height: 292px;;
      display: flex;
      flex-direction:row;
      justify-content: center;
      display: none;
  }
  
  #toolbar2
  {
      position: relative;
      background-color: transparent;
      min-width: 252px;
  }
  
  #toolbar{
      display: none;
  }
  
  /* media queries */
  @media screen and (min-width:600px)
  {
      #notes
      {
          display:block;
      }
      #canvasKf{
  
          display:block;
      }
  
      #openToolBarBtn
      {
          display: none;
      }
  
      #toolbar{
      display: block;
      }
  
      #viewToolBarMobile
      {
          display: none;
      }
      #toolbar2
      {
          display: none;
      }
  
      #containerSP
      {
          margin-left: 10px;
          margin-right: 10px;
      }
  
  }
  
  
  
  @media screen and (min-width:1300px)
  {
      #containerSP
      {
          flex-direction: row;
      }
  
      #playerDiv{
          margin-right: 10px;
      }
  
  
  }
  
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="main-container" class="container-row"&gt; 
      &lt;div id=notes&gt;
              note&lt;br&gt;
              note&lt;br&gt;
              note&lt;br&gt;
              note&lt;br&gt;
              note&lt;br&gt;
  
      &lt;/div&gt;
      &lt;div id="central-container" class="container-column"&gt; 
          &lt;div class="container-row" style="position: relative"&gt;
              &lt;div id="toolbar" style="position: absolute"&gt;
                      &lt;button id="leftBtn" class="rectangle"&gt; L  &lt;/button&gt;
                      &lt;button id="rightBtn" class="rectangle"&gt; R  &lt;/button&gt;
                      &lt;button id="upBtn" class="rectangle-up"&gt; U  &lt;/button&gt;
                      &lt;button id="frontBtn" class="rectangle-up"&gt; FR  &lt;/button&gt;
                      &lt;button id="downBtn" class="rectangle-up"&gt; D  &lt;/button&gt;
                      &lt;button id="elementBtn" class="rectangle-up"&gt; EL  &lt;/button&gt;
                      &lt;button id="arcSupBtn" class="rectangle-up"&gt; AS  &lt;/button&gt;
                      &lt;button id="arcInfBtn" class="rectangle-up"&gt; AI  &lt;/button&gt;
                  &lt;/div&gt;
              &lt;canvas id="canvas3d"&gt; &lt;/canvas&gt; 
          &lt;/div&gt;
          &lt;div id="containerSP"&gt;
              &lt;div id="sliderDiv"&gt;
                  &lt;div class="hspaceExpand"&gt;&lt;/div&gt;
                  &lt;img src="http://yobit.altervista.org/imgMod/slider.png" style="width:340px"&gt;
                  &lt;div class="hspaceExpand"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="playerDiv"&gt;
                      &lt;div class="hspaceExpand"&gt;&lt;/div&gt;
                      &lt;img src="http://yobit.altervista.org/imgMod/buttonPlayer.png" style="width:340px"&gt;
                      &lt;div class="hspaceExpand"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="openToolBarBtn" class="button"&gt;
              &lt;div class="container-row"&gt;
                      &lt;div class="hspaceExpand"&gt; &lt;/div&gt;
                      &lt;img src="http://yobit.altervista.org/imgMod/buttonView.png " style="width:340px"&gt;
                      &lt;div class="hspaceExpand"&gt; &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;canvas id="canvasKf"&gt;&lt;/canvas&gt;
  &lt;div id=viewToolBarMobile&gt;
      &lt;div id="toolbar2"&gt;
              &lt;button id="leftBtn" class="rectangle"&gt; L  &lt;/button&gt;
              &lt;button id="rightBtn" class="rectangle"&gt; R  &lt;/button&gt;
              &lt;button id="upBtn" class="rectangle-up"&gt; U  &lt;/button&gt;
              &lt;button id="frontBtn" class="rectangle-up"&gt; FR  &lt;/button&gt;
              &lt;button id="downBtn" class="rectangle-up"&gt; D  &lt;/button&gt;
              &lt;button id="elementBtn" class="rectangle-up"&gt; EL  &lt;/button&gt;
              &lt;button id="arcSupBtn" class="rectangle-up"&gt; AS  &lt;/button&gt;
              &lt;button id="arcInfBtn" class="rectangle-up"&gt; AI  &lt;/button&gt;
          &lt;/div&gt;
      &lt;button id="closeBtn" style="position: absolute; right:0%"&gt; X  &lt;/button&gt;    
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;!-- &lt;script src="kfgui.js"&gt; &lt;/script&gt;  --&gt;
  &lt;script src="scripts/view3d.js"&gt;&lt;/script&gt;
  &lt;!-- &lt;script src="viewToolBar.js"&gt; &lt;/script&gt;   --&gt;
  &lt;/
  
  &lt;/html&gt;
  </code></pre>