Flexbox переполненная панель прокрутки, отображающая на теле вместо элемента в Firefox/IE/Edge

Проблема:

В полноразмерном макете приложения (100% ширина, высота 100%) с использованием flexbox с переполнением полосы прокрутки не отображаются для переполнения-y в Firefox/IE/Edge. Они правильно отображаются в Chrome. Вместо того, чтобы иметь вертикальную полосу прокрутки в FF/IE/Edge на элементе, панель прокрутки применяется ко всей странице.

Что я пробовал:

Я попытался добавить, как упоминалось в нескольких других ответах SO, добавить min-height: 0; к элементам flex/родителям. Я не смог заставить это решение работать, но, возможно, я делаю что-то неправильно.

Скриншоты:

Chrome:

Firefox:

Пример:

https://codepen.io/gunn4r/pen/WEoPjN

html {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.canvas-wrapper {
  overflow: scroll;
}

.canvas {
  width: 3000px;
  height: 3000px;
}

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; return false;" rel="stylesheet" />

<body class="h-100">
  <div class="h-100 container-fluid d-flex flex-column">

    <div class="row bg-warning">
      <div class="col-12 py-4">Top Bar</div>
    </div>

    <div class="row no-gutter flex-grow">

      <div class="col-9 px-0 d-flex flex-column">
        <div class="canvas-wrapper">
          <div class="canvas bg-success">
            Canvas
          </div>
        </div>
        <div class="bg-danger py-3">
          Canvas Footer
        </div>
      </div>

      <div class="col-3 bg-primary">
        <div class="sidebar-item">Sidebar</div>
      </div>

    </div>

    <div class="row bg-warning">
      <div class="col-12 py-2">Overall Footer</div>
    </div>

  </div>
</body>

Ответ 1

Похоже, проблема связана с этим разделом вашего кода:

.canvas-wrapper {
    overflow: scroll;
}

Вы хотите, чтобы этот элемент имел полосы прокрутки. Однако элемент не имеет определенной высоты.

От MDN:

Чтобы эффект overflow имел эффект, контейнер уровня блока должен иметь заданную высоту (height или max-height) или white-space установлен на nowrap.

Chrome, похоже, не заботится о требованиях к высоте. Другие браузеры делают.

Этого должно быть достаточно, чтобы заставить его работать в разных браузерах:

  .canvas-wrapper {
     overflow: scroll;
     flex: 1 0 1px;
}

html {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.canvas-wrapper {
  overflow: scroll;
  flex: 1 0 1px; /* NEW */
}

.canvas {
  width: 3000px;
  height: 3000px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="h-100">
  <div class="h-100 container-fluid d-flex flex-column">

    <div class="row bg-warning">
      <div class="col-12 py-4">Top Bar</div>
    </div>

    <div class="row no-gutter flex-grow">
      
      <div class="col-9 px-0 d-flex flex-column">
         <div class="canvas-wrapper">
             <div class="canvas bg-success">
               Canvas
           </div>
        </div>
        <div class="bg-danger py-3">
          Canvas Footer
        </div>
      </div>
      
      <div class="col-3 bg-primary">
        <div class="sidebar-item">Sidebar</div>
      </div>
      
    </div>

    <div class="row bg-warning">
      <div class="col-12 py-2">Overall Footer</div>
    </div>

    </div>
</body>

Ответ 2

При использовании процента для высоты на элементе все его потомки также нуждаются в наборе высоты, и если у всех будет процент, нужно установить его вплоть до html/body.

В сочетании с Flexbox это может решить очень сложно, так как когда нужно установить height: 100% на всех потомках, другие нежелательные проблемы с рендерингом могут привести к разрыву макета.

Вот одно решение, в котором работает совершенный кросс-браузер, где добавлена дополнительная обертка canvas-fix для canvas, а затем с помощью position: absolute мы можем сделать эту работу.

Скриншот демо

Фрагмент стопки

html {
  height: 100%;
}
.flex-grow {
  flex: 1;
}
.canvas-wrapper {
  flex-grow: 1;                     /*  take all remaining space  */
  width: 100%;                      /*  full width  */
  position: relative;               /*  for the absolute positioned fix  */
}
.canvas-fix {                       /*  added rule  */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.canvas {
  width: 3000px;
  height: 3000px;
}

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; return false;" rel="stylesheet" />

<body class="h-100">
  <div class="h-100 container-fluid d-flex flex-column">

    <div class="row bg-warning">
      <div class="col-12 py-4">Top Bar</div>
    </div>

    <div class="row no-gutter flex-grow">

      <div class="col-9 px-0 d-flex flex-column">
        <div class="canvas-wrapper">
          <div class="canvas-fix">
            <div class="canvas bg-success">
               Canvas
            </div>
          </div>
        </div>
        <div class="bg-danger py-3">
          Canvas Footer
        </div>
      </div>

      <div class="col-3 bg-primary">
        <div class="sidebar-item">Sidebar</div>
      </div>

    </div>

    <div class="row bg-warning">
      <div class="col-12 py-2">Overall Footer</div>
    </div>

    </div>
</body>