Переполнение разрывов прокрутки во вложенной сетке - PullRequest
Новая
       15

Переполнение разрывов прокрутки во вложенной сетке

1 голос
/ 25 мая 2019

У меня есть две CSS-сетки. Один внутри другого. Я не хочу прокручивать всю страницу, а только содержимое области сетки вложенной сетки. Эта вложенная сетка должна заполнить все доступное пространство. Однако overflow:scroll не работает в этой вложенной сетке.

Как видно из приведенного ниже упрощенного примера, div с классом .aside работает отлично, а div с .bottomleft вообще не прокручивается.

div-высоты начинают разрушаться с .main-container - div, но я понятия не имею, почему.

Что меня действительно смущает, так это то, что все прекрасно работает в .aside - div. Единственное отличие, которое я вижу здесь, состоит в том, что он не находится во вложенной сетке.

Естественно, все работает отлично, если .bottom-left - div или второй ряд .main-container - сетки имеют фиксированную высоту, но цель состоит в том, чтобы сделать ее переменной.

Я также пытался добавить различные max-heights и heights к другим родительским элементам div, но пока не получилось.

Спасибо!

https://jsfiddle.net/vs6c4gq9/3/

html,
body {
  height: 100%;
  overflow: hidden;
}

#root {
  height: 100%;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas: 'nav nav ' 'aside main';
  height: 100%;
}

.header {
  grid-area: nav;
  background-color: lightblue;
}

.main {
  grid-area: main;
  background-color: lightpink;
  height: 100%;
}

.aside {
  grid-area: aside;
  overflow-y: scroll;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas: 'topleft topright' 'bottomleft bottomright';
  height: 100%;
  
}

.topleft {
  grid-area: topleft;
}

.topright {
  grid-area: topright;
}

.bottomleft {
  grid-area: bottomleft;
  overflow-y: scroll;
  height: 100%;
}

.bottomright {
  grid-area: bottomright;
}
<div id="root">
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="main">
      <div class="main-container">
        <div class="topleft">
          topleft
        </div>
        <div class="topright">
          topright
        </div>
        <div class="bottomleft">
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>

          <div>last</div>

        </div>
        <div class="bottomright">
          bottomright
        </div>
      </div>
    </div>
    <div class="aside">
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>last</div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 26 мая 2019

Вы правы в том смысле, что, кажется, нет никаких причин, по которым функция прокрутки работает на одном элементе (.aside), но не на другом (.bottomleft). Там, кажется, нет никакой материальной разницы. Один элемент - это вложенный контейнер сетки. Но это не должно иметь значения.

Однако, если вы посмотрите на большую картинку, ни одна из полос прокрутки не должна работать .

Свойство overflow обычно требует фиксированной длины для генерации полосы прокрутки. Без такого ограничения элемент просто расширяется для размещения содержимого, и переполнение невозможно.

Так обстоит дело в вашем коде: оба элемента переполнения установлены на height: auto. 

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto; <-- second row (where 'aside' is placed) is
                                     set to content-based height
  grid-template-areas: 'nav nav ' 'aside main';
  height: 100%;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto; <-- second row (where 'bottomright' is placed) is
                                     also set to content-based height
  grid-template-areas: 'topleft topright' 'bottomleft bottomright';
  height: 100%;
}

Теперь обратитесь к этому правилу, как описано в MDN :

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

Следовательно, функция прокрутки в вашем коде должна не работать в обоих случаях. Тот факт, что кто-то работает хотя бы в одном браузере, предполагает аномалию или вмешательство . В любом случае я бы предположил, что это ненадежно.

Рассмотрим компромисс: пожертвуйте некоторой гибкостью в обмен на большую стабильность и безопасность. Вот модифицированная версия вашего кода:

пересмотренная скрипка 

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 25px calc(100vh - 25px); /* adjustment */
  grid-template-areas: 'nav nav ' 'aside main';
  height: 100vh;
}

.header {
  grid-area: nav;
  background-color: lightblue;
}

.main {
  grid-area: main;
  background-color: lightpink;
}

.aside {
  grid-area: aside;
  overflow-y: scroll;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 25px calc(100vh - 50px);  /* adjustment */
  grid-template-areas: 'topleft topright' 'bottomleft bottomright';
}

.topleft {
  grid-area: topleft;
}

.topright {
  grid-area: topright;
}

.bottomleft {
  grid-area: bottomleft;
  overflow-y: scroll;
}

.bottomright {
  grid-area: bottomright;
}

body {
  margin: 0; /* remove default margins */
}
<div id="root">
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="main">
      <div class="main-container">
        <div class="topleft">
          topleft
        </div>
        <div class="topright">
          topright
        </div>
        <div class="bottomleft">
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>
          <div>bottomleft</div>

          <div>last</div>

        </div>
        <div class="bottomright">
          bottomright
        </div>
      </div>
    </div>
    <div class="aside">
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>aside</div>
      <div>last</div>
    </div>
  </div>
</div>
...